import Title from "@/components/Title";
import styles from "./styles.module.scss";
import PricingSummary from "../../components/PricingSummary";
import Button from "../../components/Button";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { actions, selectors } from "@/store";
import routes from "@/routes";
import { useNavigate } from "react-router-dom";
import BlurComponent from "@/components/BlurComponent";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useFunnel } from "@/hooks/funnel/useFunnel";

function SpecialOffer() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const activeProduct = useSelector(selectors.selectActiveProduct);
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

    const {
        products,
        currency,
        trialInterval,
    } = useFunnel({
        funnel: ELocalesPlacement.EmailMarketingCompatibilityV1,
        paymentPlacement: "main"
    })

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

    useEffect(() => {
        dispatch(actions.payment.update({ activeProduct: products[0] }));
    }, [dispatch, products]);

    const openPaymentModal = () => {
        navigate(routes.client.emailMarketingV1PaymentModal());
    };

    return (
        <>
            <div className={styles.container}>
                <Title className={styles.title} variant="h1">
                    {translate("special-offer.title")}
                </Title>
                <div className={styles.content}>
                    <Title className={styles.contentTitle} variant="h2">
                        {translate("special-offer.start-trial", { days: trialInterval })}
                    </Title>
                    <p className={styles.contentDescription}>
                        <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <mask id="mask0_44_3678" style={{ maskType: "luminance" }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="23">
                                <path d="M0 0H20V22.6667H0V0Z" fill="white" />
                            </mask>
                            <g mask="url(#mask0_44_3678)">
                                <path d="M15.2679 1.12743C13.3208 1.12743 11.4571 0.727711 10 0.000244141C8.54335 0.727711 6.67945 1.12743 4.73211 1.12743C3.01673 1.12743 1.36526 0.817012 0 0.245346V9.65397C0 15.7777 4.47844 21.5948 10 22.6667C15.5218 21.5948 20 15.7777 20 9.65397V0.245346C18.635 0.817012 16.9835 1.12743 15.2679 1.12743Z" fill="#00AE37" />
                            </g>
                            <path d="M8.03704 15.1012L3.87109 10.9979L5.11941 9.76837L8.03704 12.6421L14.8802 5.90161L16.1285 7.13116L8.03704 15.1012Z" fill="white" />
                            <path d="M13.9968 20.9725C17.2096 18.7977 19.5429 14.9798 19.9398 10.8855L16.1286 7.13159L8.03711 15.1017L13.9968 20.9725Z" fill="#008E28" />
                        </svg>

                        {translate("special-offer.cancel-anytime")}
                    </p>
                    <PricingSummary
                        totalToday={trialPrice}
                        originalPrice={
                            // Number(getText("full.price")) / 100
                            0
                        }
                        discountedPrice={price}
                        trialDuration={trialInterval}
                        // saveText={getText("text.save") as string}
                        saveText={""}
                        currency={currency}
                    />
                    <div className={styles.buttonContainer}>
                        <BlurComponent isActiveBlur={true} gradientClassName={styles.gradientBlur}>
                            <Button className={styles.button} onClick={openPaymentModal}>
                                {translate("special-offer.button-continue")}
                            </Button>
                        </BlurComponent>
                    </div>
                    <p className={styles.contentPolicy}>
                        {translate("special-offer.policy", {
                            days: trialInterval,
                            price: addCurrency(price, currency)
                        })}
                    </p>
                </div>
            </div>
        </>
    )
}

export default SpecialOffer