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 { compatibilityV2Prefix } from "@/routes";
import Footer from "../../components/Footer";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } 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";

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

  const readingReadyRef = useRef<HTMLDivElement>(null);
  const [isHeaderVisible, setIsHeaderVisible] = useState(false);

  const downloadApp = async () => {
    await copyToClipboard(code);
    // TODO
    window.location.href =
      "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549";
  };

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

  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 />
      <PalmPhoto />
      <div ref={readingReadyRef}>
        <Title className={styles["reading-ready"]}>
          {translate("/try-app.reading_ready.title")}
        </Title>
      </div>
      <p className={styles.instructionPoint} style={{
        marginBottom: "16px"
      }}>{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>
      <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}>{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>
      <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 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={`${compatibilityV2Prefix}/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;