import styles from "./styles.module.scss";
import Blob3 from "../../images/SVG/Blob3";
import Blob4 from "../../images/SVG/Blob4";
import Title from "@/components/Title";
import SecretDiscountTable from "../../components/SecretDiscountTable";
import Button from "../../components/Button";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { useDynamicSize } from "@/hooks/useDynamicSize";

import Header from "../../components/Header";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import Loader, { LoaderColor } from "@/components/Loader";
import { getFormattedPrice } from "@/utils/price.utils";

function SecretDiscount() {
    const { width, elementRef } = useDynamicSize({ defaultWidth: 560 });
    const { height, elementRef: policyContainerRef } = useDynamicSize<HTMLDivElement>({ defaultWidth: 560, defaultHeight: 193 });
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { translate, getPeriodText } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV2);

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

    const paymentEntityMain = getPaymentEntity("main")

    const activeProduct = products[0]
    const trialPrice = activeProduct?.trialPrice || 0;

    useEffect(() => {
        if (!activeProduct) return;
        dispatch(actions.payment.update({
            activeProduct
        }))
    }, [activeProduct])

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

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

    return (
        <section className={styles.container} ref={elementRef} style={{
            paddingBottom: `${height + 42}px`
        }}>
            <Header
                className={styles.header}
                classNameTitle={styles["header-title"]}
                isBackButtonVisible={true}
            />
            <Blob3 className={styles.blob3} />
            <Title className={styles.title} variant="h1">
                {translate("secret-discount.title")}
            </Title>
            <SecretDiscountTable
                trialPrice={getFormattedPrice(trialPrice, 0)}
                trialInterval={trialInterval}
                trialPeriod={trialPeriod}
                oldPrice={getFormattedPrice(paymentEntityMain?.price || 0, 0)}
                oldDiscount={Number(getProperty("discount.old")?.value) || 0}
                newDiscount={Number(getProperty("discount.new")?.value) || 0}
                currency={currency}
            />
            <Button className={styles.button} onClick={openPaymentModal}>
                {translate("secret-discount.button-trial", {
                    trialPeriod: getPeriodText(trialPeriod, trialInterval, "nominative", "period_adjective")
                })}
            </Button>

            <div className={styles["policy-container"]} ref={policyContainerRef}>
                <p className={styles.policy}>
                    {translate("secret-discount.policy", {
                        // days: trialDuration,
                        trialPeriod: getPeriodText(trialPeriod, trialInterval, "nominative", "period_adjective"),
                        // oldDays: getText("old.trial.duration"),
                        // trialPrice: addCurrency(trialPrice, currency),
                        price: addCurrency(
                            (
                                // Number(getText("old.price"))
                                // / (
                                //     Number(getText("split.price.value")) || 2
                                // )
                                getFormattedPrice(activeProduct?.price || 0, 0)
                            ), currency),
                        billingPeriod: getPeriodText(billingPeriod, billingInterval || 0)
                    })}
                </p>
                <Blob4 className={styles.blob4} width={width} height={height + 34} />
            </div>
        </section>
    )
}

export default SecretDiscount