import { useEffect, useMemo, useState } from "react";
import { useTranslations } from "@/hooks/translations";
import { useApi, Assets } from "@/api";
import { saveFile, buildFilename } from "../WallpaperPage/utils";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import {
  getCategoryIdByZodiacSign,
  getZodiacSignByDate,
} from "@/services/zodiac-sign";
import { getRandomArbitrary } from "@/services/random-value";

function WallpapersZodiacSign(): JSX.Element {
  const api = useApi();
  const { i18n } = useTranslations();
  const locale = i18n.language;
  const [asset, setAsset] = useState<Assets.Asset>();

  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = useMemo(() => getZodiacSignByDate(birthdate), [birthdate]);

  const getZodiacWallpaper = async () => {
    const { asset_categories } = await api.getAssetCategories({ locale });
    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
    const { assets } = await api.getAssets({
      category: String(categoryId || "1"),
    });
    const asset = assets[getRandomArbitrary(0, assets.length - 1)];
    setAsset(asset);
  };

  useEffect(() => {
    getZodiacWallpaper();
  }, [api, locale, zodiacSign]);

  const saveImage = () =>
    asset &&
    saveFile(
      asset.url.replace("http://", "https://"),
      buildFilename(zodiacSign)
    );

  return (
    <div
      className={styles["wallpaper"]}
      style={{ backgroundImage: `url(${asset?.url})` }}
    >
      <div className={styles["buttons-container"]}>
        <img src="/ButtonSave.svg" alt="Save image" onClick={saveImage} />
        <img
          src="/ButtonReload.svg"
          alt="Get new image"
          onClick={getZodiacWallpaper}
        />
      </div>
    </div>
  );
}

export default WallpapersZodiacSign;