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 PaymentModal from "../../components/PaymentModal";
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import routes from "@/routes";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import Stars from "../../components/Stars";

function Payment() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const navigate = useNavigate();
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);
  const currency = useSelector(selectors.selectCurrency);
  const trialPrice = activeProductFromStore?.trialPrice || 0;
  const fullPrice = activeProductFromStore?.price || 0;
  const [isShowPaymentModal, setIsShowPaymentModal] = useState(false);
  const [searchParams] = useSearchParams();
  const subscriptionStatus =
    searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";

  const showModal = () => {
    setIsShowPaymentModal(true);
  };

  useEffect(() => {
    if (subscriptionStatus !== "subscribed") return;
    const timer = setTimeout(() => {
      navigate(routes.client.skipTrial());
    }, 1500);
    return () => clearTimeout(timer);
  }, [navigate, subscriptionStatus]);

  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", {
          trialPrice: addCurrency(getFormattedPrice(trialPrice), currency),
          fullPrice: (
            <s>{addCurrency(getFormattedPrice(fullPrice), currency)}</s>
          ),
          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 />
      {!isShowPaymentModal && subscriptionStatus !== "subscribed" && (
        <Button className={styles.button} onClick={showModal}>
          {translate("/payment.get_personal_prediction")}
        </Button>
      )}
      <PaymentModal
        className={
          isShowPaymentModal || subscriptionStatus === "subscribed"
            ? styles["payment-modal-active"]
            : styles["payment-modal-hide"]
        }
      />
    </>
  );
}

export default Payment;