import Title from "@/components/Title";
import styles from "./styles.module.css";
import CustomButton from "../CustomButton";
import GuardPayments from "../GuardPayments";
import { useCallback, useState } from "react";
import FullScreenModal from "@/components/FullScreenModal";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { IFunnelPaymentVariant } from "@/api/resources/Session";
import { Currency } from "@/components/PaymentTable";

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

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

  const getPrice = useCallback(
    (product: IFunnelPaymentVariant) => {
      if ((product.trialPrice || 0) % 100 === 0) {
        return addCurrency((product.trialPrice || 0) / 100, currency);
      }
      return addCurrency(
        ((product.trialPrice || 0) / 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)}</span>,
            })}
          </Title>
          <div className={styles["table-element"]}>
            <p className={styles["total-today"]}>
              {translate("/trial-payment.payment_table.total_today")}
            </p>
            <span>{getPrice(product)}</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")) / 100, currency)} */}
              </span>
              {product.trialPrice !== 50 && <span>{getPrice(product)}</span>}
              {product.trialPrice === 50 && <span>{getPrice(product)}</span>}
            </div>
          </div>
        </div>
      </div>
      <CustomButton className={styles.button} onClick={buttonClick}>
        {translate("/trial-payment.button")}
      </CustomButton>
      <GuardPayments />
      <p className={styles.policy}>
        {translate("/trial-payment.subscription_policy", {
          policy: (
            <a onClick={handleSubscriptionPolicyClick}>
              {translate("/trial-payment.policy_link")}
            </a>
          ),
          trialDuration: trialInterval,
          price: addCurrency(product.price / 100, currency),
          trialPrice: getPrice(product),
        })}
      </p>
    </>
  );
}

export default PaymentTable;
