import { useEffect, useRef, useState } from "react";
import TrialPaymentHeader from "../TrialPayment/components/Header";
import Header from "../../components/Header";
import PersonalInformation from "../TrialPayment/components/PersonalInformation";
import WithPartnerInformation from "../TrialPayment/components/WithPartnerInformation";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import Title from "@/components/Title";
import Goal from "../TrialPayment/components/Goal";
import Reviews from "../TrialPayment/components/Reviews";
import { trialPaymentReviews } from "@/data/reviews";
import AccessCodeApp from "./components/AccessCodeApp";
import YourReading from "../TrialPayment/components/YourReading";
import PointsList from "../TrialPayment/components/PointsList";
import OftenAsk from "../TrialPayment/components/OftenAsk";
import { trialPaymentPointsList } from "@/data/pointsLists";
import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { copyToClipboard } from "@/services/data";

function TryAppPage() {
  const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const {
    gender,
    birthPlace,
    partnerBirthPlace,
    partnerBirthdate,
    partnerGender,
    goal,
    flowChoice,
  } = useSelector(selectors.selectQuestionnaire);
  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);
  const [singleOrWithPartner, setSingleOrWithPartner] = useState<
    "single" | "partner"
  >("single");
  const authCode = useSelector(selectors.selectAuthCode);
  const downloadAppRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (["relationship", "married"].includes(flowChoice)) {
      setSingleOrWithPartner("partner");
      return;
    }
    setSingleOrWithPartner("single");
  }, [flowChoice]);

  const downloadApp = async () => {
    metricService.reachGoal(EGoals.DOWNLOAD_APP, [EMetrics.YANDEX]);
    metricService.reachGoal(EGoals.BLACK_BUTTON, [EMetrics.FACEBOOK]);
    await copyToClipboard(authCode);
    // TODO
    window.location.href =
      "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549";
  };

  const scrollToDownloadApp = () => {
    downloadAppRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <section
      className={`${styles.page} page`}
      ref={pageRef}
      style={{
        backgroundColor: gender === "male" ? "#C1E5FF" : "#F7EBFF",
      }}
    >
      <div className={styles["background-top-blob-container"]}>
        <BackgroundTopBlob
          width={pageWidth}
          height={200}
          className={styles["background-top-blob"]}
        />
      </div>
      <Header className={styles.header} />
      <TrialPaymentHeader
        buttonClick={scrollToDownloadApp}
        buttonText="get my reading in the app"
        buttonClassName={styles["header-button"]}
      />
      {singleOrWithPartner === "partner" && (
        <WithPartnerInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
          partnerBirthPlace={partnerBirthPlace}
          partnerBirthDate={partnerBirthdate}
          partnerGender={partnerGender}
          partnerZodiacSign={partnerZodiacSign}
        />
      )}
      {singleOrWithPartner === "single" && (
        <PersonalInformation
          zodiacSign={zodiacSign}
          gender={gender}
          birthPlace={birthPlace}
          birthdate={birthdate}
        />
      )}
      <div ref={downloadAppRef} />
      <Title variant="h2" className={styles.title}>
        Your Personalized Clarity & Love Reading is ready and available in the
        app for your iPhone!
      </Title>
      <Goal goal={goal} />
      <AccessCodeApp code={authCode} />
      <span className={styles["download-app-title"]}>1. Download App</span>
      <img
        className={styles["download-app-image"]}
        src="/download-app.svg"
        alt="Download on the app store"
        onClick={downloadApp}
      />
      <span className={styles["download-app-title"]}>
        2. Enter Your Access Code
      </span>
      <div className={styles["code-container"]}>{authCode}</div>
      <p className={styles["code-description"]}>
        Enter your access code in the app to access Your Personalized Reading.
        Do not share your code with anyone
      </p>

      <YourReading
        gender={gender}
        zodiacSign={zodiacSign}
        buttonClick={scrollToDownloadApp}
        singleOrWithPartner={singleOrWithPartner}
        callToActionText="To read the full reading you need get access through the app for your iPhone"
        buttonText="get my reading in the app"
      />
      <Title
        variant="h2"
        className={styles.title}
        style={{ marginTop: "88px" }}
      >
        Users love us
      </Title>
      <Reviews reviews={trialPaymentReviews} />
      <PointsList title="What you get" points={trialPaymentPointsList} />
      <OftenAsk />
    </section>
  );
}

export default TryAppPage;
