import styles from "./styles.module.css";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { actions, selectors } from "@/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import Loader from "@/components/Loader";
import DiscountLayout from "../../layouts/Discount/DiscountLayout";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import { useFunnel } from "@/hooks/funnel/useFunnel";

function AdditionalDiscount() {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const currency = useSelector(selectors.selectCurrency);
  const activeProduct = useSelector(selectors.selectActiveProduct);
  const { products, isPending, trialInterval, getProperty } = useFunnel({
    funnel: ELocalesPlacement.V1,
    paymentPlacement: "main"
  });

  useEffect(() => {
    if (!products.length) return;
    const _activeProduct = products.find(
      (p) => p.trialPrice === activeProduct?.trialPrice
    );
    if (!_activeProduct) {
      dispatch(actions.payment.update({ activeProduct: products[0] }));
    }
    if (_activeProduct) {
      dispatch(actions.payment.update({ activeProduct: _activeProduct }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, products]);

  const handleNext = () => {
    navigate(routes.client.trialPaymentWithDiscountV1());
  };

  return (
    <DiscountLayout title={translate("/additional-discount.header_title")}>
      {isPending && <Loader className={styles.loader} />}
      {!isPending && (
        <>
          <div className={styles["discount-container"]}>
            <div className={styles["discount-point"]}>
              <img src="/fire.webp" alt="Fire" />
              <p className={styles["discount-point-description"]}>
                {translate("/additional-discount.description1", {
                  discount: (getProperty("discount.1")?.value as string).replace("-", ""),
                })}
              </p>
            </div>
            <div className={styles["discount-point"]}>
              <img src="/present.webp" alt="Present" />
              <p className={styles["discount-point-description"]}>
                {translate("/additional-discount.description2", {
                  trialDuration: trialInterval,
                })}
              </p>
            </div>
          </div>
          <p className={styles["discount-description"]}>
            {translate("/additional-discount.price", {
              price: (
                <span className={styles["new-price"]}>
                  {addCurrency((activeProduct?.price || 0) / 100, currency)}
                </span>
              ),
              fullPrice: (
                <span className={styles["old-price"]}>
                  {addCurrency(Number(getProperty("full.price")?.value) / 100, currency)}
                </span>
              ),
            })}
          </p>
          <QuestionnaireGreenButton
            className={styles.button}
            onClick={handleNext}
          >
            {translate("/additional-discount.button")}
          </QuestionnaireGreenButton>
        </>
      )}
    </DiscountLayout>
  );
}

export default AdditionalDiscount;
