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

function PalmsInformation() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const navigate = useNavigate();
  useLottie({
    preloadKey: ELottieKeys.scalesHeadPalmistry,
  });

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

  const { variant: relationshipStatusPagePlacement = "v0" } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityRelationshipStatusPagePlacement,
  });

  const { variant: pathToEnteringBirthdate = "hide" } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityPathToEnteringBirthdate,
  });

  const handleNext = () => {
    if (
      relationshipStatusPagePlacement === "v1" ||
      relationshipStatusPagePlacement === "v2" ||
      pathToEnteringBirthdate === "show"
    ) {
      return navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
    }
    navigate(routes.client.compatibilityV2RelationshipStatus());
  };

  useEffect(() => {
    const ua = window.navigator.userAgent;
    if (ua.includes("FBAN") || ua.includes("FBAV") || ua.includes("FBIOS")) {
      metricService.reachGoal(EGoals.STAYED_IN_FB, [
        EMetrics.YANDEX,
        EMetrics.KLAVIYO,
      ]);
    }
    if (ua.includes("Instagram")) {
      metricService.reachGoal(EGoals.STAYED_IN_INSTAGRAM, [
        EMetrics.YANDEX,
        EMetrics.KLAVIYO,
      ]);
    }
  }, []);

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

  return (
    <div className={styles["page-container"]}>
      {zodiacImages !== "new" && (
        <div className={styles.zodiac}>
          <img
            className={styles.image}
            src={images(`zodiacs/${gender}/${zodiacSign?.toUpperCase()}.webp`)}
            alt="Zodiac sign"
          />
        </div>
      )}
      {zodiacImages === "new" && (
        <div className={styles.zodiacNew}>
          <img
            className={styles.image}
            src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
            alt="Zodiac sign"
          />
        </div>
      )}
      <Title variant="h2" className={styles.title}>
        {translate(`/palms-information.${zodiacSign?.toLowerCase()}.title`)}
      </Title>
      <p className={styles.description}>
        {translate(
          `/palms-information.${zodiacSign?.toLowerCase()}.description`
        )}
      </p>
      <Button onClick={handleNext}>{translate("next")}</Button>
      <Policy>
        {translate("privacy_policy", {
          eulaLink: (
            <a
              href="https://aura.wit.life/terms"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("eula_link")}
            </a>
          ),
          privacyLink: (
            <a
              href="https://aura.wit.life/privacy"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("privacy_notice")}
            </a>
          ),
          clickHere: (
            <a
              href="https://aura.wit.life/"
              target="_blank"
              rel="noopener noreferrer"
            >
              {translate("policy_here")}
            </a>
          ),
        })}
      </Policy>
    </div>
  );
}

export default PalmsInformation;