import { useTranslations } from "@/hooks/translations";
import styles from "../styles.module.scss";
import Button from "@/components/CompatibilityV4/components/Button";
import useTimer from "@/hooks/palmistry/use-timer";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { copyToClipboard } from "@/services/data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { ELocalesPlacement, language } from "@/locales";
import AppNumberOne from "@/components/CompatibilityV4/components/AppNumberOne";
import Title from "@/components/Title";
import ZodiacImagesWithBook from "../../TrialPayment/components/ZodiacImagesWithBook";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { formatDateToLocale } from "@/locales/localFormats";
import YourAccessCode from "../components/YourAccessCode";
import { images } from "@/components/CompatibilityV4/data";
import HowWork from "@/components/CompatibilityV4/components/HowWork";
import MoneyBackGuarantee from "@/components/CompatibilityV4/components/MoneyBackGuarantee";
import CopyCode from "../components/CopyCode";
import YourReading from "../components/YourReading";
import WhatIncluded from "@/components/CompatibilityV4/components/WhatIncluded";
import Reviews from "@/components/CompatibilityV4/components/Reviews";
import EnterCode from "../components/EnterCode";
import { compatibilityV4Prefix } from "@/routes";
import Footer from "@/components/CompatibilityV4/components/Footer";

function TryAppV1() {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const time = useTimer();
    const code = useSelector(selectors.selectAuthCode);
    const { gender, birthdate, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
    const { dateEvent } = useSelector(selectors.selectCompatibilityV4Answers);
    const { relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
    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";
    };

    return (
        <>
            <div className={styles["paywall__get-prediction"]}>
                <div>
                    {translate("/try-app.offer_reserved.title")}
                    <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={downloadApp}
                >
                    {translate("/try-app.offer_reserved.button")}
                </Button>
            </div>
            <AppNumberOne />
            <Title className={styles["information-title"]}>
                {translate("/try-app.information-title")}
            </Title>
            <ZodiacImagesWithBook />
            {(relationshipStatus === "single" || !partnerBirthdate) &&
                <p className={styles["information-description"]}>
                    {translate("/try-app.information-description-single", {
                        color: <span>
                            {translate("/try-app.information-description-single-color", {
                                zodiacSign: zodiacSign?.toLowerCase().charAt(0).toUpperCase() + zodiacSign?.toLowerCase().slice(1),
                                birthdate: formatDateToLocale(birthdate, language),
                            })}
                        </span>,
                        eventDescription: dateEvent ? <b>
                            {translate("/try-app.information-description-single-event-description", {
                                dateEvent: formatDateToLocale(dateEvent, language),
                            })}
                        </b> : "",
                        br: <br />
                    })}
                </p>
            }
            {relationshipStatus !== "single" && partnerBirthdate &&
                <p className={styles["information-description"]}>
                    {translate("/try-app.information-description-with-partner", {
                        color: <span>
                            {translate("/try-app.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("/try-app.information-description-with-partner-event-description", {
                                dateEvent: formatDateToLocale(dateEvent, language),
                            })}
                        </b> : "",
                    })}
                </p>
            }
            <Title className={styles["reading-ready"]}>
                {translate("/try-app.reading_ready.title")}
            </Title>
            <p className={styles.instructionPoint} style={{
                marginBottom: "16px",
                marginTop: "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>
            <p className={styles.notShareDescription}>
                {translate("/try-app.not_share_description")}
            </p>
            <Title className={styles["how-work"]}>
                {translate("/try-app.how_work.title")}
            </Title>
            <HowWork />
            <MoneyBackGuarantee />
            <Title className={styles["palm-reading-ready"]}>
                {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.getPredictionInApp} ${styles["pulse-button"]}`} onClick={downloadApp}>
                <img src={images("apple-icon.png")} alt="Apple icon" />
                {translate("/try-app.get_prediction_in_app")}
            </Button>
            <YourReading
                gender={gender}
                zodiacSign={zodiacSign}
                relationshipStatus={relationshipStatus}
                partnerGender={partnerGender}
                partnerZodiacSign={partnerZodiacSign}
                isDescriptionVisible={false}
                subtitleClassName={styles["your-reading-subtitle"]}
                pointsClassName={styles["your-reading-points"]}
                blurPointsIndex={2}
                pointsLength={7}
                pointsTranslateVersion="v3"
            />
            <WhatIncluded />
            <Title className={styles["palm-reading-ready"]}>
                {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["get-my-reading-in-app"]} ${styles["pulse-button"]}`} 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: "32px" }} />
            <Button
                className={`${styles["get-my-reading-in-app"]} ${styles["pulse-button"]}`}
                style={{ marginTop: "28px" }}
                onClick={downloadApp}
            >
                {translate("/try-app.get-my-reading-in-app")}
            </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={`${compatibilityV4Prefix}/partners.png`} alt="Partners" />
            <Footer version="v2" addressVersion="v2" />
        </>
    )
}

export default TryAppV1;