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 { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import routes from "@/routes";

function Payment() {
  const navigate = useNavigate();
  const { products, currency, getText } = usePaywall({
    placementKey: EPlacementKeys["aura.placement.palmistry.redesign"],
    localesPlacement: ELocalesPlacement.PalmistryV1,
  });
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);

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

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

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

  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 />
      <div className={styles["prices-description"]}>
        {translate("/payment.will_be_charged", {
          splitPrice: addCurrency(getFormattedPrice(
            (
              fullPrice / (
                Number(getText("split.price.value")) || 2
              )
            )
          ), 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", {
                trialDuration: activeProductFromStore?.trialDuration,
                trialPrice: addCurrency(
                  getFormattedPrice(trialPrice),
                  currency
                ),
              })}
            </b>
          ),
        })}
      </div>
      <Guarantees />
      <Button className={styles.button} onClick={handlePayment}>
        {translate("/payment.get_personal_prediction")}
      </Button>
    </>
  );
}

export default Payment;