import Title from "@/components/Title";
import AppNumberOne from "../../components/AppNumberOne";
import Button from "../../components/Button";
import JoinedToday from "../../components/JoinedToday";
import PalmIsReady from "../../components/PalmIsReady";
import styles from "./styles.module.scss";
import HowWork from "../../components/HowWork";
import WhatIncluded from "../../components/WhatIncluded";
import PalmsSayAbout from "../../components/PalmsSayAbout";
import Reviews from "../../components/Reviews";
import routes, { palmistryV1Prefix } from "@/routes";
import Footer from "../../components/Footer";
import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { usePreloadImages } from "@/hooks/preload/images";
import useTimer from "@/hooks/palmistry/use-timer";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";

function TrialPayment() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const time = useTimer();
  const navigate = useNavigate();
  usePreloadImages([
    "/v1/palmistry/ticket.svg",
  ])

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

  const handleNext = () => {
    if (pageAfterTrialPaymentPalmistryV1 === "paymentForm") {
      return navigate(routes.client.palmistryV1PaymentModal());
    }
    navigate(routes.client.palmistryV1Payment());
  };

  useEffect(() => {
    metricService.reachGoal(EGoals.TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]);
  }, []);

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

  return (
    <>
      <AppNumberOne />
      <PalmIsReady />
      <JoinedToday />
      <Button className={`${styles["get-prediction"]} ${styles["pulse-button"]}`} onClick={handleNext}>
        {translate("/trial-payment.get_personal_prediction")}
      </Button>
      <Title className={styles["how-work"]}>
        {translate("/trial-payment.how_work.title")}
      </Title>
      <HowWork />
      <Button className={`${styles["begin-trial"]} ${styles["pulse-button"]}`} onClick={handleNext}>
        {translate("/trial-payment.begin_trial_now")}
      </Button>
      <WhatIncluded />
      <PalmsSayAbout />
      <Button className={`${styles["discover-more"]} ${styles["pulse-button"]}`} onClick={handleNext}>
        {translate("/trial-payment.discover_more")}
      </Button>
      <Title className={styles["why-love"]}>
        {translate("/trial-payment.why_love", {
          color: <span>{translate("/trial-payment.why_love_color")}</span>,
        })}
      </Title>
      <Reviews />
      <Button className={`${styles["success-story"]} ${styles["pulse-button"]}`} onClick={handleNext}>
        {translate("/trial-payment.success_story")}
      </Button>
      <Title className={styles["as-seen-in"]}>
        {translate("/trial-payment.as_seen_in", {
          color: (
            <span>
              {translate("app_name", undefined, ELocalesPlacement.V1)}
            </span>
          ),
        })}
      </Title>
      <img className={styles.partners} src={`${palmistryV1Prefix}/partners.png`} alt="Partners" />
      <Footer />


      <div className={styles["paywall__get-prediction"]}>
        <div>
          {translate("/paywall.offer_reserved.title", undefined, ELocalesPlacement.PalmistryV0)}
          <span className={styles["paywall__get-prediction-timer"]}>
            <span>{time}</span>
          </span>
        </div>

        <Button
          type="button"
          className={`${styles["paywall__get-prediction-button"]} ${styles["pulse-button"]}`}
          onClick={handleNext}
        >
          {translate("/paywall.offer_reserved.button", undefined, ELocalesPlacement.PalmistryV0)}
        </Button>
      </div>
    </>
  );
}

export default TrialPayment;
