import { useDispatch, useSelector } from "react-redux";
import PaymentInformation from "../../components/PaymentInformation";
import styles from "./styles.module.scss";
import { actions, selectors } from "@/store";
import { getFormattedPrice } from "@/utils/price.utils";
import Guarantees from "../../components/Guarantees";
import Button from "../../components/Button";
import { useEffect } 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";
import metricService, {
  EGoals,
  EMetrics,
} from "@/services/metric/metricService";

function Payment() {
  const dispatch = useDispatch();
  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 = useSelector(
    selectors.selectPalmistryIsShowPaymentModalV1
  );
  const [searchParams] = useSearchParams();
  const subscriptionStatus =
    searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";

  const showModal = () => {
    dispatch(actions.palmistry.setIsShowPaymentModalV1(true));
  };

  useEffect(() => {
    if (subscriptionStatus !== "subscribed") return;
    metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
    metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
      EMetrics.YANDEX,
    ]);
    if (activeProductFromStore) {
      metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
        currency: "USD",
        value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
      });
    }
    const timer = setTimeout(() => {
      navigate(routes.client.skipTrial());
    }, 1500);
    return () => clearTimeout(timer);
  }, [activeProductFromStore, 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>
      )}
    </>
  );
}

export default Payment;