import Title from "@/components/Title";
import Timer from "../Timer";
import styles from "./styles.module.scss";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getFormattedPrice } from "@/utils/price.utils";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { compatibilityV3Prefix } from "@/routes";
import { PeriodType, useTranslations } from "@/hooks/translations";

interface IPaymentInformationProps {
  trialPeriod: PeriodType;
  trialInterval: number;
}

function PaymentInformation({
  trialPeriod,
  trialInterval
}: IPaymentInformationProps) {
  const { translate, getPeriodText } = useTranslations(ELocalesPlacement.CompatibilityV3);
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);
  const fullPrice = activeProductFromStore?.price || 0;
  const trialPrice = activeProductFromStore?.trialPrice || 0;
  const currency = useSelector(selectors.selectCurrency);

  return (
    <div className={styles.container}>
      <div className={styles["offer-reserved"]}>
        <p>{translate("/payment.payment_information.personalized_offer")}</p>
        <Timer />
      </div>
      <Title className={styles.title} variant="h3">
        {translate("/payment.payment_information.title", {
          trialPeriod: getPeriodText(trialPeriod, trialInterval || 0, "nominative", "period_adjective"),
        })}
      </Title>
      <div className={styles["total-container"]}>
        <hr />
        <div className={styles["total-today"]}>
          <p>{translate("/payment.payment_information.total_today")}</p>
          <div className={styles["total-today-price"]}>
            <s>{addCurrency(getFormattedPrice(fullPrice), currency)}</s>
            <strong>
              {addCurrency(getFormattedPrice(trialPrice), currency)}
            </strong>
          </div>
        </div>
        <hr />
      </div>
      <div className={styles["code-applied"]}>
        <img src={`${compatibilityV3Prefix}/ticket.svg`} alt="Ticket" />
        {translate("/payment.payment_information.code_applied", {
          bold: <b>{translate("/payment.payment_information.code_applied_bold")}</b>,
        })}
      </div>
    </div>
  );
}

export default PaymentInformation;
