import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useCallback } from "react";
import Loader from "@/components/Loader";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

function PaymentDiscountTable() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { isPending } = useFunnel({
    funnel: ELocalesPlacement.V1,
    paymentPlacement: "main"
  });
  const currency = useSelector(selectors.selectCurrency);
  const activeProduct = useSelector(selectors.selectActiveProduct);

  const getPrice = useCallback(
    (product: IFunnelPaymentVariant | null) => {
      if (!product) {
        return addCurrency(0, currency);
      }
      return addCurrency(
        (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100,
        currency
      );
    },
    [currency]
  );

  return (
    <div className={styles.container}>
      {isPending && <Loader className={styles.loader} />}
      {!isPending && (
        <>
          <Title variant="h3" className={styles.title}>
            {translate("/trial-payment-with-discount.title")}
          </Title>
          <p className={styles["no-pressure"]}>
            {translate("/trial-payment-with-discount.cancel_anytime")}
          </p>
          <div className={styles.applied}>
            <div className={styles.side}>
              <img
                className={styles["present-image"]}
                src="/present.webp"
                alt="Present"
              />
              <p className={styles.description}>
                {translate(
                  "/trial-payment-with-discount.secret_discount_applied"
                )}
              </p>
            </div>
            <div className={styles.side}>
              {/* <span className={styles.discount}>{getText("discount.0")}</span>
              <strong>{getText("discount.1")}</strong> */}
            </div>
          </div>
          <table className={styles['table-cost']}>
            <tbody className={styles["table-cost-body"]}>
              <tr>
                <th>
                  <p>{translate("/trial-payment-with-discount.cost")}</p>
                  <p className={styles.save}>
                    {translate("/trial-payment-with-discount.you_save", {
                      save: addCurrency(30, currency),
                    })}
                  </p>
                </th>
                <th>
                  <span className={styles.discount}>
                    {/* {addCurrency(Number(getText("full.price")) / 100, currency)} */}
                  </span>
                </th>
                <th>
                  <strong className={styles.newPrice}>
                    {addCurrency((activeProduct?.price || 0) / 100, currency)}
                  </strong>
                </th>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>
                  <p>{translate("/trial-payment-with-discount.total_today")}</p>
                </th>
                <th colSpan={2}>
                  {activeProduct && <span>{getPrice(activeProduct)}</span>}
                </th>
              </tr>
            </tfoot>
          </table>
        </>
      )}
    </div>
  );
}

export default PaymentDiscountTable;
