import Title from "@/components/Title";
import styles from "./styles.module.css";
import { ReactNode, useState } from "react";
import FullScreenModal from "@/components/FullScreenModal";
import { Button } from "../../ui/Button";
import GuardPayments from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/GuardPayments";
import { useGenderInfo } from "../../lib/getGenderInfo";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

interface IPaymentTableProps {
  product: IFunnelPaymentVariant;
  buttonClick: () => void;
  title?: ReactNode | string;
}

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

function PaymentTable({
  product,
  buttonClick,
  title = "Special offer",
}: IPaymentTableProps) {
  const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
  const genderInfo = useGenderInfo();

  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}>
          {typeof title === "string" ? (
            <Title variant="h2" className={styles.title}>
              {title}
            </Title>
          ) : (
            title
          )}
        </div>
        <div className={styles["table-container"]}>
          <Title variant="h3" className={styles.title}>
            Personalized reading for ${getPrice(product)}
          </Title>
          <div className={styles["table-element"]}>
            <p>Total today:</p>
            <span>${getPrice(product)}</span>
          </div>
          <hr />
          <div className={styles["table-footer"]}>
            <p>Your cost per 2 weeks after trial</p>
            <div>
              <span className={styles.discount}>$65</span>
              <span className={styles.price}>
                ${(product.trialPrice || 0) / 100}
              </span>
            </div>
          </div>
        </div>
      </div>
      <Button
        className={styles.button}
        style={{ backgroundColor: genderInfo?.colorAssociation }}
        onClick={buttonClick}
      >
        START CHAT
      </Button>
      <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;
