import Title from "@/components/Title";
import AppNumberOne from "../../components/AppNumberOne";
import Button from "../../components/Button";
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 { compatibilityV3Prefix } from "@/routes";
import Footer from "../../components/Footer";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement, language } from "@/locales";
import { usePreloadImages } from "@/hooks/preload/images";
import { useEffect, useRef, useState } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import Header from "./components/Header";
// import PalmPhoto from "./components/PalmPhoto";
import YourAccessCode from "./components/YourAccessCode";
import { images } from "../../data";
import CopyCode from "./components/CopyCode";
// import EnterCode from "./components/EnterCode";
import { copyToClipboard } from "@/services/data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { formatDateToLocale } from "@/locales/localFormats";
import ZodiacImages from "./components/ZodiacImages";
import YourReading from "./components/YourReading";

function TryApp() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
  usePreloadImages([
    "/v1/palmistry/ticket.svg",
  ])
  const code = useSelector(selectors.selectAuthCode);

  const readingReadyRef = useRef<HTMLDivElement>(null);
  const [isHeaderVisible, setIsHeaderVisible] = useState(false);
  const { gender, birthdate, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
  const { dateEvent } = useSelector(selectors.selectCompatibilityV3Answers);
  const { relationshipStatus } = useSelector(selectors.selectCompatibilityV3Answers);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const partnerZodiacSign = getZodiacSignByDate(partnerBirthdate);

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

  useEffect(() => {
    const handleScroll = () => {
      if (readingReadyRef.current) {
        const rect = readingReadyRef.current.getBoundingClientRect();
        const distanceFromTop = Math.round(rect.top);
        const viewportHeight = window.innerHeight;
        if (distanceFromTop < (viewportHeight / 2 - readingReadyRef.current.clientHeight / 2)) {
          setIsHeaderVisible(true);
        } else {
          setIsHeaderVisible(false);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <>
      <Header classNameContainer={isHeaderVisible ? styles.headerVisible : ""} onButtonClick={downloadApp} />
      <AppNumberOne />
      <Title className={styles["information-title"]}>
        {translate("/trial-payment.information-title")}
      </Title>
      {/* <PalmPhoto /> */}
      <ZodiacImages
        gender={gender}
        zodiacSign={zodiacSign}
        relationshipStatus={relationshipStatus}
        partnerGender={partnerGender}
        partnerZodiacSign={partnerZodiacSign}
      />
      {(relationshipStatus === "single" || !partnerBirthdate) &&
        <p className={styles["information-description"]}>
          {translate("/trial-payment.information-description-single", {
            color: <span>
              {translate("/trial-payment.information-description-single-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
              })}
            </span>,
            eventDescription: dateEvent ? <b>
              {translate("/trial-payment.information-description-single-event-description", {
                dateEvent: formatDateToLocale(dateEvent, language),
              })}
            </b> : "",
            br: <br />
          })}
        </p>
      }
      {relationshipStatus !== "single" && partnerBirthdate &&
        <p className={styles["information-description"]}>
          {translate("/trial-payment.information-description-with-partner", {
            color: <span>
              {translate("/trial-payment.information-description-with-partner-color", {
                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                partnerZodiacSign: partnerZodiacSign?.toLowerCase().charAt(0).toUpperCase() + partnerZodiacSign?.toLowerCase().slice(1),
                birthdate: formatDateToLocale(birthdate, language),
                partnerBirthdate: formatDateToLocale(partnerBirthdate, language),
              })}
            </span>,
            eventDescription: dateEvent ? <b>
              {translate("/trial-payment.information-description-with-partner-event-description", {
                dateEvent: formatDateToLocale(dateEvent, language),
              })}
            </b> : "",
          })}
        </p>
      }
      <div ref={readingReadyRef}>
        <Title className={styles["reading-ready"]}>
          {translate("/try-app.reading_ready.title")}
        </Title>
      </div>
      <p className={styles.instructionPoint} style={{
        marginBottom: "16px",
        marginTop: "8px"
      }}>{translate("/try-app.instruction_point_1")}</p>
      <YourAccessCode />
      <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_2")}</p>
      <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
      {/* <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_3")}</p> */}
      {/* <CopyCode /> */}
      <p className={styles.notShareDescription}>
        {translate("/try-app.not_share_description")}
      </p>
      <YourReading
        gender={gender}
        zodiacSign={zodiacSign}
        relationshipStatus={relationshipStatus}
        partnerGender={partnerGender}
        partnerZodiacSign={partnerZodiacSign}
      />
      {/* <Button className={styles.getPredictionInApp} onClick={downloadApp}>
        <img src={images("apple-icon.png")} alt="Apple icon" />
        {translate("/try-app.get_prediction_in_app")}
      </Button> */}
      {/* <Title className={styles["how-work"]}>
        {translate("/try-app.how_work.title")}
      </Title>
      <HowWork /> */}
      {/* <MoneyBackGuarantee /> */}
      {/* <EnterCode  /> */}
      {/* <Title variant="h2" className={styles.title} style={{
        fontSize: "26px"
      }}>
        {translate("/try-app.your_palm_reading_is_ready")}
      </Title> */}
      <p className={styles.instructionPoint2} style={{ marginTop: "32px" }}>{translate("/try-app.instruction_point_4")}</p>
      <CopyCode variant="black" />
      <p className={styles.instructionPoint2} style={{ marginTop: "24px" }}>{translate("/try-app.instruction_point_5")}</p>
      {/* <Button className={styles["begin-trial"]} onClick={downloadApp}>
        {translate("/try-app.get-my-reading-in-app")}
      </Button> */}
      <Button className={`${styles.getPredictionInApp} ${styles["pulse-button"]}`} style={{ marginBottom: "50px" }} onClick={downloadApp}>
        <img src={images("apple-icon.png")} alt="Apple icon" />
        {translate("/try-app.get_prediction_in_app")}
      </Button>
      <WhatIncluded />
      {/* <PalmsSayAbout /> */}
      {/* <EnterCode />
      <Button className={styles["discover-more"]} onClick={downloadApp}>
        {translate("/try-app.get-my-reading-in-app")}
      </Button> */}
      {/* <Title variant="h2" className={styles.title} style={{
        fontSize: "26px"
      }}>
        {translate("/try-app.your_palm_reading_is_ready")}
      </Title>
      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
      <CopyCode variant="black" />
      <p className={styles.instructionPoint2} style={{ marginTop: "24px" }}>{translate("/try-app.instruction_point_5")}</p>
      <Button className={styles["begin-trial"]} onClick={downloadApp}>
        {translate("/try-app.get-my-reading-in-app")}
      </Button> */}
      <Title className={styles["why-love"]}>
        {translate("/try-app.why_love", {
          color: <span>{translate("/try-app.why_love_color")}</span>,
        })}
      </Title>
      <Reviews />
      {/* <EnterCode style={{ marginTop: "42px" }} />
      <Button className={styles["success-story"]} onClick={downloadApp}>
        {translate("/try-app.get-my-reading-in-app")}
      </Button> */}
      <Title variant="h2" className={styles.title} style={{
        fontSize: "26px",
        marginTop: "42px"
      }}>
        {translate("/try-app.your_palm_reading_is_ready")}
      </Title>
      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
      <CopyCode variant="black" />
      <p className={styles.instructionPoint2} style={{ marginTop: "24px" }}>{translate("/try-app.instruction_point_5")}</p>
      <Button className={`${styles["begin-trial"]} ${styles["pulse-button"]}`} onClick={downloadApp}>
        {translate("/try-app.get-my-reading-in-app")}
      </Button>
      <Title className={styles["as-seen-in"]}>
        {translate("/try-app.as_seen_in", {
          color: (
            <span>
              {translate("app_name", undefined, ELocalesPlacement.V1)}
            </span>
          ),
        })}
      </Title>
      <img className={styles.partners} src={`${compatibilityV3Prefix}/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"]}
          onClick={handleNext}
        >
          {translate("/paywall.offer_reserved.button", undefined, ELocalesPlacement.PalmistryV0)}
        </Button>
      </div> */}
    </>
  );
}

export default TryApp;
