import styles from "./styles.module.scss";
import Blob from "../../images/SVG/Blob";
import { images } from "../../data";
import Title from "@/components/Title";
import Button from "../../components/Button";
import Blob2 from "../../images/SVG/Blob2";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import Loader, { LoaderColor } from "@/components/Loader";
import { getFormattedPrice } from "@/utils/price.utils";

function SaveOff() {
    const { translate, getPeriodText } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);

    const {
        isPending,
        products,
        currency,
        trialInterval,
        trialPeriod,
        getProperty,
        getPaymentEntity
    } = useFunnel({
        funnel: ELocalesPlacement.PalmistryV1,
        paymentPlacement: "main_secret_discount"
    })

    const paymentEntity = getPaymentEntity("main")

    const activeProduct = products[0]
    const trialPrice = (activeProduct?.trialPrice || 0) / 100;

    const navigate = useNavigate();

    const handleNext = () => {
        navigate(routes.client.palmistryV1SecretDiscount());
    }

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

    if (isPending) return <Loader color={LoaderColor.Black} />

    return (
        <>
            <Blob className={styles.blob} />
            <Blob2 className={styles.blob2} />
            <img className={styles.gift} src={images("gift.svg")} alt="gift" />
            <Title className={styles.title}>
                {translate("save-off.title", { discount: getProperty("discount.new")?.value })}
            </Title>
            <p className={styles.description}>
                {translate("save-off.instead", {
                    price: <span className={styles.price}>{addCurrency(trialPrice, currency)}</span>,
                    oldPrice: <span className={styles.discount}>
                        {translate("save-off.instead-old-price", {
                            oldPrice: addCurrency(getFormattedPrice(paymentEntity?.price || 0, 0), currency)
                        })}
                    </span>
                })}
            </p>
            <p className={styles.point} style={{ marginTop: 12 }}>
                <img src={images("fire.png")} alt="fire" />
                {translate("save-off.trial-duration", {
                    trialPeriod: getPeriodText(trialPeriod, trialInterval),
                    oldTrialPeriod: <s>
                        {getPeriodText(paymentEntity?.trialPeriod || "DAY", paymentEntity?.trialInterval || 0)}
                    </s>,
                })}
            </p>
            <p className={styles.point}>
                <img src={images("gift.png")} alt="gift" />
                {translate("save-off.discount-offer", { discount: getProperty("discount.new")?.value })}
            </p>
            <Button className={styles.button} onClick={handleNext}>
                {translate("save-off.button-trial", {
                    trialPeriod: getPeriodText(trialPeriod, trialInterval)
                })}
            </Button>
        </>
    )
}

export default SaveOff