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 { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
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";

const placementKey = EPlacementKeys["aura.placement.email.marketing"];

function SpecialOffer() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    // const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
    const activeProduct = useSelector(selectors.selectActiveProduct);
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

    const { products, currency, getText } = usePaywall({
        placementKey,
    });

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

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

    // const {
    //     error,
    //     isPaymentSuccess,
    //     isModalClosed,
    //     showCreditCardForm,
    // } = usePayment({
    //     placementKey,
    //     activeProduct: products[0],
    //     paymentFormType: "lightbox"
    // });

    const openPaymentModal = () => {
        // setIsOpenPaymentModal(true);
        // showCreditCardForm();
        navigate(routes.client.emailMarketingV1PaymentModal());
    };

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

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

    // useEffect(() => {
    //     if (isModalClosed) {
    //         handleCloseModal()
    //     }
    // }, [isModalClosed])

    // const handleCloseModal = () => {
    //     // setIsOpenPaymentModal(false);
    //     return navigate(routes.client.emailMarketingV1SaveOff())
    // };

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

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

    return (
        <>
            {/* {products[0] && (
                <Modal
                    containerClassName={styles.modal}
                    open={isOpenPaymentModal}
                    onClose={handleCloseModal}
                    type="hidden"
                >
                    <PaymentForm
                        placementKey={placementKey}
                        onPaymentError={onPaymentError}
                        onPaymentSuccess={onPaymentSuccess}
                    />
                </Modal>
            )} */}
            <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: trialDuration })}
                    </Title>
                    <p className={styles.contentDescription}>
                        {translate("special-offer.cancel-anytime")}
                    </p>
                    <PricingSummary
                        totalToday={trialPrice}
                        originalPrice={Number(getText("full.price")) / 100}
                        discountedPrice={price}
                        trialDuration={trialDuration}
                        saveText={getText("text.save") as string}
                        currency={currency}
                    />
                    <p className={styles.contentPolicy}>
                        {translate("special-offer.policy", {
                            days: trialDuration,
                            price: addCurrency(price, currency)
                        })}
                    </p>
                    <div className={styles.buttonContainer}>
                        <BlurComponent isActiveBlur={true}>
                            <Button className={styles.button} onClick={openPaymentModal}>
                                {translate("special-offer.button-continue")}
                            </Button>
                        </BlurComponent>
                    </div>
                </div>
            </div>
        </>
    )
}

export default SpecialOffer