import Title from "@/components/Title";
import styles from "./styles.module.css";
import CustomButton from "../CustomButton";
import GuardPayments from "../GuardPayments";
import { useState } from "react";
import FullScreenModal from "@/components/FullScreenModal";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

interface IPaymentTableProps {
  product: IFunnelPaymentVariant;
  buttonClick: () => void;
}

const getPrice = (product: IFunnelPaymentVariant) => {
  return (product.trialPrice || 0) / 100;
};

function PaymentTable({ product, buttonClick }: IPaymentTableProps) {
  const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
  const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
    event.preventDefault();
    setIsOpenPrivacyModal(true);
  };

  return (
    <>
      {isOpenPrivacyModal && (
        <FullScreenModal isOpen={isOpenPrivacyModal}>
          <div className={styles["modal-container"]}>
            <img
              className={styles.cross}
              src="/cross.webp"
              alt="Cross"
              onClick={() => setIsOpenPrivacyModal(false)}
            />
            <iframe
              className={styles["iframe"]}
              src="https://witlab.us/terms"
            ></iframe>
          </div>
        </FullScreenModal>
      )}
      <div className={styles["payment-table"]}>
        <div className={styles.header}>
          <span>Special offer</span>
        </div>
        <div className={styles["table-container"]}>
          <Title variant="h3" className={styles.title}>
            Personalized reading for{" "}
            <span className={styles.purple}>${getPrice(product)}</span>
          </Title>
          <div className={styles["table-element"]}>
            <p>Total today:</p>
            <span>${getPrice(product)}</span>
          </div>
          <hr />
          <div className={styles["table-element"]}>
            <p>Your cost per 2 weeks after trial</p>
            <div>
              <span className={styles.discount}>$65</span>
              <span>${getPrice(product)}</span>
            </div>
          </div>
        </div>
      </div>
      <CustomButton className={styles.button} onClick={buttonClick}>
        get my reading
      </CustomButton>
      <GuardPayments />
      <p className={styles.policy}>
        You are enrolling in 2 weeks subscription. By continuing you agree that
        if you don't cancel prior to the end of the 3-day trial for the $
        {getPrice(product)} you will automatically be charged $19 every 2 weeks
        until you cancel in settings. Learn more about cancellation and refund
        policy in{" "}
        <a onClick={handleSubscriptionPolicyClick}>Subscription policy</a>
      </p>
    </>
  );
}

export default PaymentTable;
