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 { 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";

const placementKey = EPlacementKeys["aura.placement.compatibility.v2.secret.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, getText } = usePaywall({
        placementKey,
        localesPlacement: ELocalesPlacement.EmailMarketingCompatibilityV2,
    });
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV2);

    // const activeProductFromStore = useSelector(selectors.selectActiveProduct);
    // const activeProduct = products.find(product => product?.trialPrice === activeProductFromStore?.trialPrice) || products[0]
    const activeProduct = products[0]
    // const price = (activeProduct?.price || 0) / 100;
    const trialPrice = (activeProduct?.trialPrice || 0) / 100;
    // const trialDuration = activeProduct?.trialDuration || 7;


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

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

    // const {
    //     error,
    //     isPaymentSuccess,
    //     showCreditCardForm,
    // } = usePayment({
    //     placementKey,
    //     activeProduct,
    //     paymentFormType: "lightbox"
    // });

    // const onPaymentSuccess = () => {
    //     metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    //     metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
    //         currency: "USD",
    //         value: ((activeProduct?.trialPrice || 100) / 100).toFixed(2),
    //     });
    //     return navigate(routes.client.paymentSuccess())
    // }

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

    // const onPaymentError = () => {
    //     metricService.reachGoal(EGoals.PAYMENT_ERROR, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    //     return navigate(routes.client.paymentFail())
    // }

    const openPaymentModal = () => {
        // metricService.reachGoal(EGoals.PAYMENT_METHODS_OPENED, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
        // metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED, [EMetrics.KLAVIYO]);
        // setIsPaymentModalOpen(true);
        // showCreditCardForm();
        navigate(routes.client.compatibilityV2SecretDiscountPaymentModal());
    };

    // useEffect(() => {
    //     if (error) {
    //         onPaymentError();
    //     }
    // }, [error])

    // useEffect(() => {
    //     if (isPaymentSuccess) {
    //         onPaymentSuccess();
    //     }
    // }, [isPaymentSuccess])

    return (
        <section className={styles.container} ref={elementRef} style={{
            paddingBottom: `${height + 42}px`
        }}>
            {/* <PaymentModal
                // containerClassName={styles["modal-content"]}
                open={isPaymentModalOpen}
                onClose={onModalClosed}
            >
                <PaymentForm onPaymentError={onPaymentError} onPaymentSuccess={onPaymentSuccess} placementKey={placementKey} />
            </PaymentModal> */}
            <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: getText("trial.duration") })}
            </Button>

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

export default SecretDiscount