import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import routes from "@/routes";
import styles from "./styles.module.css";
import { useApi, useApiCall } from "@/api";
import { Asset } from "@/api/resources/Assets";
import { useCallback, useEffect, useRef, useState } from "react";
import BlurringSubstrate from "../BlurringSubstrate";
import EnergyValues from "../EnergyValues";
import { UserAura } from "@/api/resources/Auras";
import { useDispatch, useSelector } from "react-redux";
import {
  getCategoryIdByZodiacSign,
  getZodiacSignByDate,
} from "@/services/zodiac-sign";
import { actions, selectors } from "@/store";
import { getRandomArbitrary } from "@/services/random-value";
import Title from "../Title";
// import { UserDailyForecast } from "@/api/resources/UserDailyForecasts";
import { EPathsFromHome } from "@/store/siteConfig";
import { buildFilename, saveFile } from "../WallpaperPage/utils";
import Onboarding from "../Onboarding";
import TextWithFinger from "../TextWithFinger";
import Slider from "../Slider";
import BestiesHoroscopeSlider, { Horoscope } from "../BestiesHoroscopeSlider";
import PredictionMoonsSlider, {
  IPredictionMoon,
} from "../PredictionMoonsSlider";
import { predictionMoonsPeriods } from "@/data";
import WallpapersZodiacSign from "../WallpapersZodiacSign";
import ThermalSlider from "../ThermalSlider";
import MoonPhaseTracker from "../MoonPhaseTracker";
import EnergyVampirism from "../EnergyVampirism";
import NameHoroscopeSlider from "../NameHoroscopeSlider";

const buttonTextFormatter = (text: string): JSX.Element => {
  const sentences = text.split(".");
  return (
    <>
      <strong>{sentences[0]}</strong>
      <br />
      <span style={{ fontSize: "12px" }}>{sentences[1]}</span>
    </>
  );
};

function HomePage(): JSX.Element {
  const token = useSelector(selectors.selectToken);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const buttonsRef = useRef<HTMLDivElement>(null);

  const { i18n, t } = useTranslation();
  const locale = i18n.language;
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const [asset, setAsset] = useState<Asset>();
  const [moonsAssets, setMoonsAssets] = useState<Asset[]>([]);
  const api = useApi();

  const homeConfig = useSelector(selectors.selectHome);
  const isShowNavbar = homeConfig.isShowNavbar;
  const onboardingConfigHome = useSelector(selectors.selectOnboardingHome);

  const compatibilities = useSelector(selectors.selectCompatibilities);

  const [isShowOnboardingHome, setIsShowOnboardingHome] = useState(
    !onboardingConfigHome?.isShown
  );

  useEffect(() => {
    dispatch(
      actions.onboardingConfig.update({
        home: {
          isShown: true,
        },
      })
    );
  }, [dispatch]);

  const handleCompatibility = () => {
    dispatch(
      actions.siteConfig.update({
        home: { pathFromHome: EPathsFromHome.compatibility, isShowNavbar },
      })
    );
    navigate(routes.client.compatibility());
  };

  const handleBreath = () => {
    dispatch(
      actions.siteConfig.update({
        home: { pathFromHome: EPathsFromHome.breath, isShowNavbar },
      })
    );
    navigate(routes.client.breath());
  };

  const handleMyHoroscope = () => {
    navigate(routes.client.myHoroscopeResult());
  };

  const handleMagicBall = () => {
    navigate(routes.client.magicBall());
  };

  const assetsData = useCallback(async () => {
    const { asset_categories } = await api.getAssetCategories({ locale });
    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
    const { assets } = await api.getAssets({
      category: String(categoryId || "1"),
    });
    return assets;
  }, [api, locale, zodiacSign]);

  const {
    data: assets,
    // isPending
  } = useApiCall<Asset[]>(assetsData);

  useEffect(() => {
    if (assets) {
      setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
    }
  }, [assets]);

  const auraData = useCallback(async () => {
    const { user_aura } = await api.getAuras({ token });
    return user_aura;
  }, [api, token]);

  const {
    data: aura,
    // isPending
  } = useApiCall<UserAura>(auraData);

  // const dailyForecastData = useCallback(async () => {
  //   const { user_daily_forecast } = await api.getDailyForecasts({ token });
  //   return user_daily_forecast;
  // }, [api, token]);

  // const {
  //   data: dailyForecast,
  //   // isPending
  // } = useApiCall<UserDailyForecast>(dailyForecastData);

  useEffect(() => {
    getMoonsImages();
  }, []);

  const getMoonsImages = async () => {
    const assets = (
      await api.getAssets({ category: String("au.prediction_moons" || "1") })
    ).assets;
    const randomAssets: Asset[] = [];
    for (let i = 0; i < predictionMoonsPeriods.length; i++) {
      const index = getRandomArbitrary(0, assets.length - 1);
      randomAssets.push(assets[index]);
      assets.splice(index, 1);
    }
    setMoonsAssets(randomAssets);
  };

  const downloadImg = () => {
    if (!asset) return;
    saveFile(asset.url.replace("http://", "https://"), buildFilename("1"));
  };

  const handleBestiesHoroscope = (item: Horoscope) => {
    const { name, birthDate } = item;
    navigate(
      `${routes.client.horoscopeBestiesResult()}?name=${name}&birthDate=${birthDate}`
    );
  };

  const handleThermal = (item: Horoscope) => {
    const { name, birthDate } = item;
    navigate(
      `${routes.client.thermalResult()}?name=${name}&birthDate=${birthDate}`
    );
  };

  const handlePredictionMoon = (item: IPredictionMoon) => {
    const { period } = item;
    navigate(`${routes.client.predictionMoonResult()}?period=${period}`);
  };

  const handleMoonPhaseTracker = () => {
    navigate(`${routes.client.moonPhaseTracker()}?period=today`);
  };

  const handleEnergyVampirism = () => {
    navigate(`${routes.client.energyVampirismResult()}?period=today`);
  };

  const handleNameHoroscope = (item: IPredictionMoon) => {
    navigate(`${routes.client.nameHoroscopeResult()}?period=${item.period}`);
  };

  return (
    <section
      className={`${styles.page} page`}
      style={{
        backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
      }}
    >
      {/* <div
        className={styles.background}
        style={{
          backgroundImage: `url(${asset?.url.replace("http://", "https://")})`,
        }}
      > */}
      <div className={styles.header}>
        <BlurringSubstrate>
          <div className={styles["header__energies"]}>
            <div className={styles["header__energies-header"]}>
              <div className={styles["header__energies-aura"]}></div>
              <span className={styles["header__energies-title"]}>
                Your energy today
              </span>
            </div>
            {aura && <EnergyValues values={aura.stats} />}
          </div>
        </BlurringSubstrate>
        <div className={styles["header__save"]} onClick={downloadImg}>
          {/* <a href={asset?.url.replace('http://', 'https://')} download></a> */}
        </div>
      </div>
      <div
        className={styles.content}
        style={{
          marginTop: isShowNavbar
            ? "calc(100vh - 570px)"
            : "calc(100vh - 500px)",
        }}
      >
        <div
          ref={buttonsRef}
          className={`${styles["content__buttons"]} 
          `}
          // ${
          //   isShowNavbar ? styles["content__buttons--hidden"] : ""
          // }
        >
          <Onboarding
            targetRef={buttonsRef.current as HTMLDivElement}
            isShow={isShowOnboardingHome}
          >
            <TextWithFinger
              text={t("au.web_onbording.start")}
              crossClickHandler={() => setIsShowOnboardingHome(false)}
            />
          </Onboarding>
          <BlurringSubstrate
            style={{ color: "#fa71ea" }}
            className={styles["content__buttons-item"]}
            clickHandler={handleCompatibility}
          >
            {buttonTextFormatter(t("aura-money_compatibility-button"))}
          </BlurringSubstrate>
          <BlurringSubstrate
            style={{ color: "#00f0ff" }}
            className={styles["content__buttons-item"]}
            clickHandler={handleBreath}
          >
            {buttonTextFormatter(t("aura-10_breath-button"))}
          </BlurringSubstrate>
          <BlurringSubstrate
            style={{ color: "#FD433F" }}
            className={styles["content__buttons-item"]}
            clickHandler={handleMyHoroscope}
          >
            {buttonTextFormatter(
              t("Receive an In-Depth Analysis and Today’s Horoscope")
            )}
          </BlurringSubstrate>
        </div>
        <div className={`${styles["content__buttons"]}`}>
          <div
            className={`${styles["content__aura"]}`}
            onClick={handleMagicBall}
          >
            <p className={styles["content__aura-text"]}>{"Get an answer"}</p>
          </div>
        </div>

        {/* SLIDERS */}
        <div className={styles.sliders}>
          <div className={styles["slider"]}>
            <Title variant="h2" className={styles["sliders__title"]}>
              {"Your Besties' Horoscope"}
            </Title>
            <Slider>
              {compatibilities.map((item, index) => (
                <BestiesHoroscopeSlider
                  data={item}
                  key={index}
                  onClick={() => {
                    handleBestiesHoroscope(item);
                  }}
                />
              ))}
            </Slider>
          </div>
          <div className={styles["slider"]}>
            <Title variant="h2" className={styles["sliders__title"]}>
              {"Prediction Based on Your Moons"}
            </Title>
            <Slider>
              {predictionMoonsPeriods.map((item, index) => (
                <PredictionMoonsSlider
                  image={moonsAssets[index]?.url}
                  data={item}
                  key={index}
                  onClick={() => {
                    handlePredictionMoon(item);
                  }}
                />
              ))}
            </Slider>
          </div>
        </div>
        {/* END SLIDERS */}

        <Title variant="h2" className={styles["sliders__title"]}>
          {"Energy Vampirism"}
        </Title>
        <EnergyVampirism onClick={handleEnergyVampirism} />

        {/* SLIDERS */}
        <div className={styles.sliders}>
          <div className={styles["slider"]}>
            <Title variant="h2" className={styles["sliders__title"]}>
              {t("Your Name's Horoscope")}
            </Title>
            <Slider>
              {predictionMoonsPeriods.map((item, index) => (
                <NameHoroscopeSlider
                  data={{ ...item, name: "Victor Ershov" }}
                  key={index}
                  onClick={() => {
                    handleNameHoroscope(item);
                  }}
                />
              ))}
            </Slider>
          </div>
        </div>
        {/* END SLIDERS */}

        <Title variant="h2" className={styles["sliders__title"]}>
          {"AI-based unique Walpapers"}
        </Title>
        <WallpapersZodiacSign />

        {/* SLIDERS */}
        <div className={styles.sliders}>
          <div className={styles["slider"]}>
            <Title variant="h2" className={styles["sliders__title"]}>
              {t("au.thermal_compatibility.result_title")}
            </Title>
            <Slider>
              {compatibilities.map((item, index) => (
                <ThermalSlider
                  data={item}
                  key={index}
                  onClick={() => {
                    handleThermal(item);
                  }}
                />
              ))}
            </Slider>
          </div>
        </div>
        {/* END SLIDERS */}

        <MoonPhaseTracker onClick={handleMoonPhaseTracker} />

        {/* <div className={styles["content__daily-forecast"]}>
          {dailyForecast &&
            dailyForecast.forecasts.map((forecast, index) => (
              <div
                className={styles["content__daily-forecast-item"]}
                key={index}
              >
                <Title
                  variant="h3"
                  className={styles["content__daily-forecast-title"]}
                >
                  {t("aura.personal_aura.button")}
                </Title>
                <p className={styles["content__daily-forecast-body"]}>
                  {forecast.body}
                </p>
              </div>
            ))}
        </div> */}
      </div>
      {/* </div> */}
    </section>
  );
}

export default HomePage;