import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useAuth } from "@/auth";
import { useApi, useApiCall, Assets, DailyForecasts } from "@/api";
import { saveFile, buildFilename } from "./utils";
import Loader, { LoaderColor } from "../Loader";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import {
  getCategoryIdByZodiacSign,
  getZodiacSignByDate,
} from "@/services/zodiac-sign";
import { Zodiac } from "@/api/resources/Zodiacs";

type Forecasts = DailyForecasts.Forecast[];
type PersonalAssets = Assets.Asset[];
interface WallpaperData {
  assets: PersonalAssets;
  forecasts: Forecasts;
  zodiac: Zodiac;
}

function WallpaperPage(): JSX.Element {
  const api = useApi();
  const { t, i18n } = useTranslation();
  const locale = i18n.language;
  const token =
    "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw";

  const {
    user,
    // token
  } = useAuth();
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const category = user?.profile.sign?.sign || "";

  const loadData = useCallback(async () => {
    const { asset_categories } = await api.getAssetCategories({ locale });
    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
    return Promise.all([
      api.getZodiacs({ zodiac: zodiacSign.toLowerCase(), token }),
      api.getAssets({ category: String(categoryId || "1") }),
      api.getDailyForecasts({ token }),
    ]).then(([{ zodiac }, { assets }, { user_daily_forecast }]) => ({
      zodiac,
      assets,
      forecasts: user_daily_forecast.forecasts,
    }));
  }, [api, token, locale, zodiacSign]);
  const { data, isPending } = useApiCall<WallpaperData>(loadData);
  const forecasts = data ? data.forecasts : [];
  const asset = data ? data.assets.at(0) : null;
  const zodiacInfo = data ? data.zodiac : null;

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

  return (
    <section className={styles["wallpaper-page"]}>
      <div
        className={styles["wallpaper-image"]}
        style={{ backgroundImage: `url(${asset?.url})` }}
      >
        <div className={styles["zodiac-metas"]}>
          {zodiacInfo?.metas.map((meta, index) => (
            <div key={index} className={styles["zodiac-meta"]}>
              <p className={styles["zodiac-meta-label"]}>{meta.label}</p>
              <p className={styles["zodiac-meta-value"]}>{meta.value}</p>
            </div>
          ))}
        </div>
        {asset ? (
          <div className={styles["btn-download"]} onClick={handleClick} />
        ) : null}
        {isPending ? <Loader color={LoaderColor.White} /> : null}
      </div>
      <div className={styles["wallpaper-content"]}>
        {isPending ? null : (
          <>
            <h1 className={styles["wallpaper-title"]}>
              {t("analysis_background")}
            </h1>
            {forecasts.map((forecast) => (
              <div
                key={forecast.category_name}
                className={styles["wallpaper-forecast"]}
              >
                <h2 className={styles["wallpaper-subtitle"]}>
                  {forecast.category}
                </h2>
                <p className={styles["wallpaper-text"]}>{forecast.body}</p>
              </div>
            ))}
          </>
        )}
      </div>
    </section>
  );
}

export default WallpaperPage;
