import styles from "./styles.module.scss";
import Title from "@/components/Title";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Button from "../../components/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useMemo } from "react";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { useTheme } from "@/hooks/theme/useTheme";

function HeadOrHeartResult() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { headOrHeart, relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers);
  const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
  const translatePrefix = relationshipStatus === "single" ? "single" : "with-partner";

  const { darkTheme } = useTheme();
  useLottie({
    preloadKey: darkTheme ? ELottieKeys.letScanDark : ELottieKeys.letScan,
  });

  const { isReady, variant } = useUnleash({
    flag: EUnleashFlags.headOrHeartResultPageCompatibilityV2,
  });

  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const zodiacSignPartner = getZodiacSignByDate(partnerBirthdate);

  const handleBack = () => {
    navigate(-1);
  };

  const handleNext = () => {
    navigate(routes.client.compatibilityV2LetScan());
  };

  const imageUrl = useMemo(() => {
    const imageName = headOrHeart === "depends" ? "both" : headOrHeart;
    return `/v2/compatibility/head-or-heart-result/${imageName}.svg`;
  }, [headOrHeart]);

  if (!isReady) return <Loader color={LoaderColor.Black} />;

  return (
    <section className={styles.container}>
      {variant === "v1" && <img
        src={imageUrl}
        alt="result image"
        className={styles.image}
      />}
      <Title variant="h1" className={styles.title}>
        {headOrHeart === "both" &&
          translate(`/both.${translatePrefix}.title`, {
            wonderful: (
              <b className={styles.highlite}>{translate(`/both.${translatePrefix}.wonderful`)}</b>
            ),
            zodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            partnerZodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSignPartner?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase(),
            partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "head" &&
          translate(`/with-head.${translatePrefix}.title`, {
            zodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            partnerZodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSignPartner?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase(),
            partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "heart" &&
          translate(`/with-heart.${translatePrefix}.title`, {
            zodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            partnerZodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSignPartner?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase(),
            partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
          })}
        {headOrHeart === "depends" &&
          translate(`/depends.${translatePrefix}.title`, {
            zodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
              </b>
            ),
            partnerZodiacSign: (
              <b className={styles.highlite}>
                {translate(`zodiac_signs.${zodiacSignPartner?.toLowerCase()}`)}
              </b>
            ),
            gender: translate(gender?.toLowerCase()).toLowerCase(),
            partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
          })
        }
      </Title>
      <div className={styles["buttons-container"]}>
        <Button
          className={`${styles.button} ${styles["back-button"]}`}
          onClick={handleBack}
        >
          {translate("back")}
        </Button>
        <Button
          className={`${styles.button} ${styles["next-button"]}`}
          onClick={handleNext}
        >
          {translate("next")}
        </Button>
      </div>
    </section>
  );
}

export default HeadOrHeartResult;