// import { useNavigate } from "react-router-dom";
// import routes from "@/routes";
import styles from "./styles.module.css";
import UserHeader from "../UserHeader";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import Title from "../Title";
import { useTranslations } from "@/hooks/translations";
import EmailsList from "../EmailsList";
import PriceList from "../PriceList";
import { useEffect, useState } from "react";
import Loader from "../Loader";
import { getRandomArbitrary } from "@/services/random-value";
import { useFunnel } from "@/hooks/funnel/useFunnel";
import { ELocalesPlacement } from "@/locales";

function PriceListPage(): JSX.Element {
  const { translate } = useTranslations();
  // const navigate = useNavigate();
  const dispatch = useDispatch();
  const homeConfig = useSelector(selectors.selectHome);
  const selectedPrice = useSelector(selectors.selectSelectedPrice);
  const email = useSelector(selectors.selectEmail);
  const { products } = useFunnel({
    funnel: ELocalesPlacement.V1,
    paymentPlacement: "main"
  });
  const [countUsers, setCountUsers] = useState(752);

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

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

  return (
    <>
      <UserHeader email={email} />
      <section className={`${styles.page} page`}>
        {!!products.length && (
          <>
            <Title className={styles.title} variant="h2">
              {translate("choose_your_own_fee")}
            </Title>
            <p className={styles.slogan}>
              {translate("aura.web.price_selection")}
            </p>
            <div className={styles["emails-list-container"]}>
              <EmailsList
                products={products}
                // title={getText("text.5", {
                //   replacementSelector: "strong",
                //   replacement: [
                //     {
                //       target: "${quantity}",
                //       replacement: countUsers.toString(),
                //     },
                //   ],
                // })}
                title={""}
              />
            </div>
            <div className={styles["price-list-container"]}>
              <PriceList
                activeItem={selectedPrice}
                products={products}
                click={handleNext}
              />
            </div>
          </>
        )}
        {!products.length && <Loader />}
      </section>
    </>
  );
}

export default PriceListPage;
