import Title from "@/components/Title";
import Button from "../../components/Button";
import styles from "./styles.module.scss";
import routes from "@/routes";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { usePreloadImages } from "@/hooks/preload/images";
import ZodiacImagesWithBook from "../TrialPayment/components/ZodiacImagesWithBook";
import useTimer from "@/hooks/palmistry/use-timer";
import { useNavigate } from "react-router-dom";
import Loader, { LoaderColor } from "@/components/Loader";
import { getFormattedPrice } from "@/utils/price.utils";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { actions } from "@/store";
import TryAppV1 from "./v1";
import { useFunnel } from "@/hooks/funnel/useFunnel";

function TryApp() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
  usePreloadImages([
    "/v1/palmistry/ticket.svg",
  ])
  const time = useTimer();
  const { products, isPending, currency } = useFunnel({
    funnel: ELocalesPlacement.CompatibilityV4,
    paymentPlacement: "main"
  });
  const activeProduct = products?.[products.length - 1];

  useEffect(() => {
    if (activeProduct) {
      dispatch(
        actions.payment.update({
          activeProduct,
        })
      );
    }
  }, [activeProduct])

  const readInApp = () => {
    navigate(routes.client.compatibilityV4CodeInstruction());
  }

  const buy = () => {
    navigate(routes.client.compatibilityV4PaymentModal());
  }

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

  return <TryAppV1 />

  return (
    <>
      <Title className={styles.title}>
        {translate("/try-app.title")}
      </Title>
      <ZodiacImagesWithBook />
      <p className={styles.description}>
        {translate("/try-app.description", {
          price: addCurrency(getFormattedPrice(activeProduct?.trialPrice || 0), currency)
        })}
      </p>
      <p className={styles.descriptionTimer}>
        {translate("/try-app.description-timer", {
          bold: <b>
            {translate("/try-app.description-timer-bold", {
              time: time,
            })}
          </b>
        })}
      </p>
      <Button className={styles.button} onClick={buy}>
        {translate("/try-app.buy", {
          price: addCurrency(getFormattedPrice(activeProduct?.trialPrice || 0), currency)
        })}
      </Button>
      <Button className={styles.button} onClick={readInApp}>
        {translate("/try-app.read-in-app", {
          br: <br />
        })}
      </Button>
    </>
  );
}

export default TryApp;
