import Title from "@/components/Title";
import styles from "./styles.module.css";
import { unlimitedReadings } from "@/data/additionalPurchases";
import FooterButton from "../../components/FooterButton";
import { useNavigate } from "react-router-dom";
import Slider, { Settings } from "react-slick";
import FirstSlide from "../../components/FirstSlide";
import SliderNextArrow from "../../components/SliderNextArrow";
import SliderPrevArrow from "../../components/SliderPrevArrow";
import routes from "@/routes";
import { useAuth } from "@/auth";
import { SinglePayment, useApi, useApiCall } from "@/api";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useCallback, useState } from "react";
import { createSinglePayment } from "@/services/singlePayment";
import Loader, { LoaderColor } from "@/components/Loader";
import { ResponsePost } from "@/api/resources/SinglePayment";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import Copyright from "../../components/Copyright";

const sliderSettings: Settings = {
  dots: false,
  infinite: false,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  className: styles["slider-container"],
  nextArrow: <SliderNextArrow />,
  prevArrow: <SliderPrevArrow />,
};

function UnlimitedReadingsPage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const { user: userFromStore } = useAuth();
  const api = useApi();
  const tokenFromStore = useSelector(selectors.selectToken);
  const currency = useSelector(selectors.selectCurrency);
  const [isLoading, setIsLoading] = useState(false);
  const [_paymentIntent, setPaymentIntent] = useState<ResponsePost | null>(null);
  const [isError, setIsError] = useState(false);
  const returnUrl = `${window.location.protocol}//${window.location.host
    }${routes.client.addConsultationV1()}`;

  const loadData = useCallback(async () => {
    return await api.getSinglePaymentProducts({ token: tokenFromStore });
  }, [api, tokenFromStore]);

  const { data: products, isPending: isPendingProducts } =
    useApiCall<SinglePayment.ResponseGet[]>(loadData);

  const currentProduct = products?.find(
    (product) => product.key === "main.unlimited.readings"
  );

  const handleClick = async () => {
    try {
      if (!userFromStore || !currentProduct) return;
      setIsLoading(true);
      const { _id, key } = currentProduct;
      const paymentInfo = {
        productId: _id,
        key,
      };
      const paymentIntent = await createSinglePayment(
        userFromStore,
        paymentInfo,
        tokenFromStore,
        userFromStore.email,
        userFromStore.profile.full_name,
        userFromStore.profile.birthday,
        returnUrl,
        api
      );
      setPaymentIntent(paymentIntent);
      if ("payment" in paymentIntent) {
        if (paymentIntent.payment.status === "paid")
          return navigate(routes.client.addConsultationV1());
        return setIsError(true);
      }
    } catch (error) {
      setIsError(true);
    } finally {
      setIsLoading(false);
    }
  };

  const handleClickSkip = () => {
    navigate(routes.client.addConsultationV1());
  };

  return (
    <div className={styles.container}>
      {!currentProduct && (
        <Loader className={styles.loader} color={LoaderColor.Black} />
      )}
      {!!currentProduct?.price && (
        <>
          <Slider {...sliderSettings}>
            <FirstSlide
              classNameSlide={styles["slider-inner"]}
              price={currentProduct?.price || 0}
            />
            <div className={styles.slider}>
              <div
                className={`${styles["slider-inner"]} ${styles["slider-inner-img"]}`}
              >
                <img src="/v1/smartphone-2.webp" alt="Premium Intro" />
                <img src="/v1/smartphone-3.webp" alt="Premium Intro" />
              </div>
            </div>
            <div className={styles.slider}>
              <div
                className={`${styles["slider-inner"]} ${styles["slider-inner-img"]}`}
              >
                <img src="/v1/smartphone-4.webp" alt="Premium Intro" />
                <img src="/v1/smartphone-5.webp" alt="Premium Intro" />
              </div>
            </div>
          </Slider>
          <Title variant="h2" className={styles.title}>
            {translate("/unlimited-readings.title")}
          </Title>
          <ul className={styles.list}>
            {unlimitedReadings.map(({ title, icon }, index) => (
              <li className={styles.item} key={index}>
                <span
                  className={styles.image}
                  style={{ backgroundImage: `url(${icon})` }}
                />
                <span className={styles.text}>{translate(title)}</span>
              </li>
            ))}
          </ul>
          {isError && <p className={styles.error}>{translate("went_wrong")}</p>}
          <FooterButton
            onClick={handleClick}
            onClickSkip={handleClickSkip}
            disabled={isPendingProducts || isLoading}
            classNameButton={styles.button}
          >
            {isPendingProducts || isLoading ? (
              <Loader color={LoaderColor.White} />
            ) : (
              translate("/unlimited-readings.add_unlimited_readings")
            )}
          </FooterButton>
          <p className={styles.policy}>
            {translate("/unlimited-readings.description", {
              price: addCurrency(
                ((currentProduct?.price || 0) / 100).toFixed(2),
                currency
              ),
            })}
          </p>
          <Copyright />
        </>
      )}
    </div>
  );
}

export default UnlimitedReadingsPage;
