import Title from "@/components/Title";
import styles from "./styles.module.css";
import Button from "../Button";
import GuardPayments from "../GuardPayments";
import { useCallback, useState } from "react";
import FullScreenModal from "@/components/FullScreenModal";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

interface IPaymentTableProps {
  product: IFunnelPaymentVariant;
  gender: string;
  placementKey: EPlacementKeys;
  trialInterval: number;
  buttonClick: () => void;
}

function PaymentTable({
  // gender,
  product,
  placementKey,
  buttonClick,
  trialInterval
}: IPaymentTableProps) {
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);
  const { getText, currency } = usePaywall({
    placementKey,
    localesPlacement: ELocalesPlacement.EmailMarketingPalmistryV2,
  });
  const [isOpenPrivacyModal, setIsOpenPrivacyModal] = useState<boolean>(false);
  const handleSubscriptionPolicyClick = (event: React.MouseEvent) => {
    event.preventDefault();
    setIsOpenPrivacyModal(true);
  };

  const getPrice = useCallback(
    (price: number) => {
      if (price % 100 === 0) {
        return addCurrency(price / 100, currency);
      }
      return addCurrency(
        (price / 100).toFixed(2),
        currency
      );
    },
    [currency]
  );

  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}
          style={{
            // backgroundColor: gender === "male" ? "#85B6FF" : "#D1ACF2",
          }}
        >
          <span>{translate("trial-payment.payment_table_special_offer")}</span>
        </div>
        <div className={styles["table-container"]}>
          <Title variant="h3" className={styles.title}>
            {translate("trial-payment.payment_table_title", {
              price: <span className={styles.purple}>{getPrice(product.trialPrice || 0)}</span>,
            })}
          </Title>
          <div className={styles["table-element"]}>
            <p className={styles["total-today"]}>
              {translate("trial-payment.payment_table_total_today")}
            </p>
            <span>{getPrice(product.trialPrice || 0)}</span>
          </div>
          <hr />
          <div className={styles["table-element"]}>
            {/* {product.trialPrice !== 50 && ( */}
            <p>
              {translate("trial-payment.payment_table_cost")}
            </p>
            {/* )} */}
            {/* {product.trialPrice === 50 && (
              <p
                style={{
                  fontSize: "11px",
                  lineHeight: "14px",
                  color: "#8E8E93",
                  marginRight: "8px",
                }}
              >
                Your cost after the trial is fourteen dollars for every two
                weeks or {addCurrency("0.50", currency)} per half-day
              </p>
            )} */}
            <div>
              <span className={styles.discount}>
                {addCurrency(Number(getText("full.price")), currency)}
              </span>
              <span className={styles["discount-price"]}>{getPrice(product.price)}</span>
            </div>
          </div>
        </div>
      </div>
      <Button className={styles.button} onClick={buttonClick}>
        {translate("trial-payment.get_trial_days", { days: trialInterval })}
      </Button>
      <GuardPayments />
      <p className={styles.policy}>
        {translate("trial-payment.subscription_policy", {
          policyLink: (
            <a onClick={handleSubscriptionPolicyClick}>
              {translate("trial-payment.policy_link")}
            </a>
          ),
          trialDuration: trialInterval,
          price: addCurrency(product.price / 100, currency),
          trialPrice: getPrice(product.trialPrice || 0),
        })}
      </p>
    </>
  );
}

export default PaymentTable;
