import PriceList from "@/components/PriceList";
import styles from "./styles.module.css";
import { useEffect, 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";

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 [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
  const [isDisabled, setIsDisabled] = useState(true);

  useEffect(() => {
    (async () => {
      const { sub_plans } = await api.getSubscriptionPlans({ locale });
      const plans = sub_plans
        .filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
        .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);
    })();
  }, [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 7-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>
      <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;