import PriceList from "@/components/PriceList";
import styles from "./styles.module.css";
import { useEffect, useMemo, useState } from "react";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { useTranslation } from "react-i18next";
import { useApi } from "@/api";
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";

interface IPlanKey {
  [key: string]: number;
}

function TrialChoicePage() {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  const api = useApi();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const selectedPrice = useSelector(selectors.selectSelectedPrice);
  const homeConfig = useSelector(selectors.selectHome);
  const email = useSelector(selectors.selectEmail);
  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
  const [isDisabled, setIsDisabled] = useState(true);
  const allowedPlans = useMemo(() => [""], []);

  useEffect(() => {
    (async () => {
      const { sub_plans } = await api.getSubscriptionPlans({ locale });
      const plansWithoutTest = sub_plans.filter(
        (plan: ISubscriptionPlan) => !plan.name.includes("(test)")
      );
      const plansKeys: IPlanKey = {};
      const plans: ISubscriptionPlan[] = [];
      for (const plan of plansWithoutTest) {
        plansKeys[plan.name] = plansKeys[plan.name]
          ? plansKeys[plan.name] + 1
          : 1;
        if (
          (plansKeys[plan.name] > 1 && !plan.trial?.is_free && !!plan.trial) ||
          allowedPlans.includes(plan.id)
        ) {
          const targetPlan = plansWithoutTest.find(
            (item) => item.name === plan.name && item.id.includes("stripe")
          );
          plans.push(targetPlan as ISubscriptionPlan);
        }
      }

      plans.sort((a, b) => {
        if (!a.trial || !b.trial) {
          return 0;
        }
        if (a.trial?.price_cents < b.trial?.price_cents) {
          return -1;
        }
        if (a.trial?.price_cents > b.trial?.price_cents) {
          return 1;
        }
        return 0;
      });

      setSubPlans(plans);
    })();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [api, locale]);

  const handlePriceItem = () => {
    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}>
        We've helped millions of people to have happier lives and better
        relationships, and we want to help you too.
      </p>
      <p className={`${styles.text} ${styles.bold}`}>
        Money shouldn’t stand in the way of finding astrology guidance that
        finally works. So, choose an amount that you think is reasonable to try
        us out for one week.
      </p>
      <p className={`${styles.text} ${styles.bold} ${styles.purple}`}>
        It costs us $13.67 to offer a 3-day trial, but please choose the amount
        you are comfortable with.
      </p>
      <div className={styles["price-container"]}>
        <PriceList
          subPlans={subPlans}
          activeItem={selectedPrice}
          classNameItem={styles["price-item"]}
          classNameItemActive={styles["price-item-active"]}
          click={handlePriceItem}
        />
        <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
          This option will help us support those who need to select the lowest
          trial prices!
        </p>
        <img
          className={styles["arrow-image"]}
          src="/arrow.svg"
          alt={`Arrow to $${subPlans.at(-1)}`}
        />
      </div>
      <div className={styles["emails-list-container"]}>
        <EmailsList
          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}
      >
        See my plan
      </MainButton>
      <p className={styles["auxiliary-text"]}>
        *Cost of trial as of February 2024
      </p>
    </section>
  );
}

export default TrialChoicePage;