import PriceList from "@/components/PriceList";
import styles from "./styles.module.css";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import EmailsList from "@/components/EmailsList";
import MainButton from "@/components/MainButton";
import { getRandomArbitrary } from "@/services/random-value";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import { ELocalesPlacement } from "@/locales";

function TrialChoicePage() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const selectedPrice = useSelector(selectors.selectSelectedPrice);
  const homeConfig = useSelector(selectors.selectHome);
  const email = useSelector(selectors.selectEmail);
  const [isDisabled, setIsDisabled] = useState(true);
  const [countUsers, setCountUsers] = useState(752);

  useEffect(() => {
    const randomDelay = getRandomArbitrary(3000, 5000);
    const countUsersTimeOut = setTimeout(() => {
      setCountUsers((prevState) => prevState + 1);
    }, randomDelay);
    return () => clearTimeout(countUsersTimeOut);
  }, [countUsers]);

  const { products } = useFunnel({
    funnel: ELocalesPlacement.V1,
    paymentPlacement: "main"
  });

  const handlePriceItem = () => {
    metricService.reachGoal(EGoals.AURA_SELECT_TRIAL, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
    setIsDisabled(false);
  };

  const handleNext = () => {
    dispatch(
      actions.siteConfig.update({
        home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false },
      })
    );
    navigate(routes.client.trialPayment());
  };

  return (
    <section className={`${styles.page} page`}>
      <p className={styles.text}>
        {/* {getText("text.0", {
          replacementSelector: "b",
          color: "#1C38EA",
        })} */}
      </p>
      <p className={`${styles.text} ${styles.bold}`}>
        {/* {getText("text.1", {
          color: "#1C38EA",
        })} */}
      </p>
      <p className={`${styles.text} ${styles.bold} ${styles.purple}`}>
        {/* {getText("text.2", {
          color: "#1C38EA",
        })} */}
      </p>
      <div className={styles["price-container"]}>
        <PriceList
          products={products}
          activeItem={selectedPrice}
          classNameItem={styles["price-item"]}
          classNameItemActive={styles["price-item-active"]}
          click={handlePriceItem}
        />
        <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
          {/* {getText("text.3", {
            color: "#1C38EA",
          })} */}
        </p>
        <img
          className={styles["arrow-image"]}
          src="/arrow.svg"
          alt={`Arrow to $${products.at(-1)?.key}`}
        />
      </div>
      <div className={styles["emails-list-container"]}>
        <EmailsList
          // title={getText("text.5", {
          //   replacementSelector: "strong",
          //   replacement: [
          //     {
          //       target: "${quantity}",
          //       replacement: countUsers.toString(),
          //     },
          //   ],
          // })}
          title={""}
          products={products}
          classNameContainer={styles["emails-container"]}
          classNameTitle={styles["emails-title"]}
          classNameEmailItem={styles["email-item"]}
          direction="right-left"
        />
      </div>
      <p className={styles.email}>{email}</p>
      <MainButton
        className={styles.button}
        disabled={isDisabled}
        onClick={handleNext}
      >
        {/* {getText("text.button.1", {
          color: "#1C38EA",
        })} */}
      </MainButton>
      <p className={styles["auxiliary-text"]}>
        {/* {getText("text.4", {
          color: "#1C38EA",
        })} */}
      </p>
    </section>
  );
}

export default TrialChoicePage;
