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 { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { addCurrency, ELocalesPlacement } from "@/locales";
import Modal from "@/components/Modal";
import { useEffect, useState } from "react";
import PaymentForm from "@/components/Payment/nmi/PaymentForm";
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 Header from "@/components/pages/ABDesign/v1/components/Header";
import { useDynamicSize } from "@/hooks/useDynamicSize";

const placementKey = EPlacementKeys["aura.placement.email.compatibility.discount"]

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 { products, currency } = usePaywall({
        placementKey,
        localesPlacement: ELocalesPlacement.EmailMarketingCompatibilityV1,
    });
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

    const activeProduct = products[0];
    const price = (activeProduct?.price || 0) / 100;
    const trialDuration = activeProduct?.trialDuration || 7;

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

    const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);


    const onPaymentSuccess = () => {
        return navigate(routes.client.paymentSuccess())
    }

    const onModalClosed = () => {
        setIsPaymentModalOpen(false);
    }

    const onPaymentError = () => {
        return navigate(routes.client.paymentFail())
    }

    const openPaymentModal = () => {
        setIsPaymentModalOpen(true);
    };

    return (
        <section className={styles.container} ref={elementRef} style={{ 
            paddingBottom: `${height + 42}px`
        }}>
            <Header
                className={styles.header}
                classNameTitle={styles["header-title"]}
                isBackButtonVisible={true}
            />
            {activeProduct && (
                <Modal
                    containerClassName={styles.modal}
                    open={isPaymentModalOpen}
                    onClose={onModalClosed}
                    type="hidden"
                >
                    <PaymentForm
                        placementKey={placementKey}
                        onPaymentError={onPaymentError}
                        onPaymentSuccess={onPaymentSuccess}
                    />
                </Modal>
            )}
            <Blob3 className={styles.blob3} />
            <Title className={styles.title} variant="h1">
                {translate("secret-discount.title")}
            </Title>
            <SecretDiscountTable />
            <Button className={styles.button} onClick={openPaymentModal}>
                {translate("secret-discount.button-trial", { days: trialDuration })}
            </Button>

            <div className={styles["policy-container"]} ref={policyContainerRef}>
                <p className={styles.policy}>
                    {translate("secret-discount.policy", {
                        days: trialDuration,
                        price: addCurrency(price, currency)
                    })}
                </p>
                <Blob4 className={styles.blob4} width={width} height={height + 34} />
            </div>
        </section>
    )
}

export default SecretDiscount