import { useSelector } from "react-redux";
import PaymentInformation from "../../components/PaymentInformation";
import styles from "./styles.module.scss";
import { selectors } from "@/store";
import { getFormattedPrice } from "@/utils/price.utils";
import Guarantees from "../../components/Guarantees";
import Button from "../../components/Button";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import Stars from "../../components/Stars";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import routes from "@/routes";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import Loader, { LoaderColor } from "@/components/Loader";

function Payment() {
  const navigate = useNavigate();
  const {
    isPending,
    products,
    currency,
    trialInterval,
    trialPeriod,
    billingInterval,
    billingPeriod
  } = useFunnel({
    funnel: ELocalesPlacement.CompatibilityV3,
    paymentPlacement: "main"
  })
  const { translate, getPeriodText } = useTranslations(ELocalesPlacement.CompatibilityV3);
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);

  const trialPrice = activeProductFromStore?.trialPrice || 0;
  const fullPrice = activeProductFromStore?.price || 0;

  const handlePayment = () => {
    navigate(routes.client.compatibilityV3PaymentModal());
  };

  useEffect(() => {
    if (!products.length) return;
    const _targetProduct = products.find(product => product.id === activeProductFromStore?.id);
    if (!_targetProduct || !activeProductFromStore) {
      navigate(routes.client.compatibilityV3TrialChoice());
    }
  }, [products, activeProductFromStore]);

  if (isPending) return <Loader color={LoaderColor.Black} />

  return (
    <>
      <div className={styles["app-number-one"]}>
        <p className={styles.text}>
          {translate("/payment.app_number_one", {
            color: <span>{translate("/payment.app_number_one_color")}</span>,
          })}
        </p>
        <Stars />
      </div>
      <PaymentInformation
        trialPeriod={trialPeriod}
        trialInterval={trialInterval}
      />
      <div className={styles["prices-description"]}>
        {translate("/payment.will_be_charged", {
          // TODO: add split price (?)
          splitPrice: addCurrency(getFormattedPrice(
            // (
            //   fullPrice / (
            //     Number(getProperty("split.price.value")?.value) || 2
            //   )
            // )
            fullPrice
          ), currency),
          save: addCurrency(
            getFormattedPrice(fullPrice - trialPrice),
            currency
          ),
          emailReminder: (
            <b>{translate("/payment.will_be_charged_email_reminder")}</b>
          ),
          trialInfo: (
            <b>
              {translate("/payment.will_be_charged_trial_info", {
                trialPeriod: getPeriodText(trialPeriod, trialInterval || 0, "nominative", "period_adjective"),
                trialPrice: addCurrency(
                  getFormattedPrice(trialPrice),
                  currency
                ),
              })}
            </b>
          ),
          perPeriod: getPeriodText(billingPeriod, billingInterval || 0)
        })}
      </div>
      <Guarantees />
      <Button className={styles.button} onClick={handlePayment}>
        {translate("/payment.get_personal_prediction")}
      </Button>
    </>

  );
}

export default Payment;
