import Title from "@/components/Title";
import styles from "./styles.module.css";
import ReservedTimer from "./components/ReservedTimer";
import MainButton from "@/components/MainButton";
import Modal from "@/components/Modal";
import PaymentModal from "@/components/PaymentModal";
import { useEffect, useState } from "react";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";

function MarketingTrialPayment() {
  const dispatch = useDispatch();
  const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
  const activeProduct = useSelector(selectors.selectActiveProduct);

  const { products, getText } = usePaywall({
    placementKey: EPlacementKeys["aura.placement.email.marketing"],
  });

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

  const openStripeModal = () => {
    setIsOpenPaymentModal(true);
  };

  const handleCloseModal = () => {
    setIsOpenPaymentModal(false);
  };

  return (
    <>
      {products[0] && (
        <Modal
          containerClassName={styles.modal}
          open={isOpenPaymentModal}
          onClose={handleCloseModal}
          type="hidden"
        >
          <PaymentModal
            placementKey={EPlacementKeys["aura.placement.email.marketing"]}
          />
        </Modal>
      )}
      <section className={`${styles.page} page`}>
        <div className={styles.wrapper}>
          <div className={styles.banner}>Special Offer</div>
          <Title variant="h2" className={styles.title}>
            Start your {activeProduct?.trialDuration}-day trial
          </Title>
          <p className={styles.description}>No pressure. Cancel anytime</p>
          <div className={styles["total-today"]}>
            <p className={styles.description}>Total today:</p>
            <p className={styles.value}>
              ${((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0}
            </p>
          </div>
          <div className={styles.line} />
          <div className={styles["code-container"]}>
            <p>Code applied!</p>
            <ReservedTimer />
          </div>
          <div className={styles["sale-container"]}>
            <p className={styles.description}>
              Your cost per 2 weeks after trial
            </p>
            <p className={styles.value}>
              <span className={styles["old-price"]}>
                ${Number(getText("full.price")) / 100}
              </span>
              <span className={styles["new-price"]}>
                ${(activeProduct?.price || 0) / 100}
              </span>
            </p>
          </div>
          <p className={styles["sale-description"]}>{getText("text.save")}</p>
          <div className={styles.line} />
          <p className={styles["text-description"]}>
            You will be charged only{" "}
            <b>
              ${((products[0]?.trialPrice || 0) / 100).toFixed(2) || 0} for your{" "}
              {activeProduct?.trialDuration}-day trial.
            </b>{" "}
            Subscription <b>renews automatically</b> until cancelled. You{" "}
            <b>can cancel at any time</b> before the end of the trial.
          </p>
          <MainButton className={styles.button} onClick={openStripeModal}>
            <img src="/credit-card-white.svg" alt="Credit card" />
            <p>Get access</p>
          </MainButton>
          <p className={styles.policy}>
            By continuing you agree that if you don`t cancel prior to the end of
            the {activeProduct?.trialDuration}-days trial, you will
            automatically be charged ${(activeProduct?.price || 0) / 100} every
            2 weeks until you cancel in settings. Learn more about cancellation
            and refund policy in Subscription terms
          </p>
        </div>
      </section>
    </>
  );
}

export default MarketingTrialPayment;