import Button from "@/components/ChatsPath/ui/Button";
import styles from "./styles.module.scss";
import { CircularProgressbar } from "react-circular-progressbar";
import { useEffect, useMemo, useState } from "react";
import { sleep } from "@/services/date";
import ToggleSwitch from "@/components/ChatsPath/ui/ToggleSwitch";
import Loader, { LoaderColor } from "@/components/Loader";
import { getPriceCentsToDollars } from "@/services/price";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

interface IOutOfCreditsModalProps {
  isLoading?: boolean;
  isError?: boolean;
  products: IFunnelPaymentVariant[];
  handleClickNotWant: () => void;
  handleClickButton: () => void;
  timerLeft?: () => void;
}

const timerSeconds = 30;

function OutOfCreditsModal({
  isLoading = false,
  isError = false,
  products,
  handleClickNotWant,
  handleClickButton,
  timerLeft,
}: IOutOfCreditsModalProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const dispatch = useDispatch();
  const [timerValue, setTimerValue] = useState(timerSeconds);
  const isAutoRefill = useSelector(selectors.selectIsAutoRefill);

  const currentProduct = useMemo(() => {
    return products.find((product) => product.key === "credits.80");
  }, [products]);

  const handleToggle = () => {
    dispatch(actions.chat.updateIsAutoRefill(!isAutoRefill));
  };

  useEffect(() => {
    (async () => {
      await sleep(1000);
      if (timerValue > 0) {
        setTimerValue(timerValue - 1);
      } else {
        timerLeft && timerLeft();
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [timerValue]);

  return (
    <>
      <h3 className={styles.title}>
        {translate("/expert.out_of_credits_modal_title")}
      </h3>
      <div className={styles["refill-wrapper"]}>
        <h4>{translate("/expert.out_of_credits_modal_1_click")}</h4>
        <p>
          {translate("/expert.out_of_credits_modal_credits", {
            // credits: currentProduct?.description,
            price: (
              <span>${getPriceCentsToDollars(currentProduct?.price || 0)}</span>
            ),
          })}
        </p>
      </div>
      <div className={styles["progress-container"]}>
        <span className={styles["timer-text"]}>
          {translate("/expert.out_of_credits_modal_seconds")}
        </span>
        <CircularProgressbar
          // counterClockwise={true}
          className={styles["progress-bar"]}
          styles={{
            path: { stroke: "#7ED8F8" },
            trail: { stroke: "#4F4B88" },
            text: {
              fill: "#7ED8F8",
              fontSize: "30px",
              fontWeight: "bold",
              dominantBaseline: "no-change",
            },
          }}
          maxValue={timerSeconds}
          minValue={0}
          value={timerValue}
          text={timerValue.toString()}
          strokeWidth={8}
        />
      </div>
      <hr className={styles.line} />
      <div className={styles["auto-refill"]}>
        <div className={styles["text-container"]}>
          <h4>{translate("/expert.out_of_credits_modal_interruption")}</h4>
          <p>
            {translate("/expert.out_of_credits_modal_interruption_description")}
          </p>
        </div>
        <ToggleSwitch isOn={isAutoRefill} onToggle={handleToggle} />
      </div>
      <div className={styles["button-wrapper"]}>
        <Button
          classNameContainer={styles.button}
          onClick={handleClickButton}
          disabled={!currentProduct || isLoading}
        >
          {isLoading && <Loader color={LoaderColor.White} />}
          {!isLoading && translate("/expert.out_of_credits_modal_button")}
        </Button>
        {isError && (
          <span className={styles.error}>
            {translate("/expert.something_went_wrong")}
          </span>
        )}
      </div>
      <Button
        classNameContainer={styles["not-continue"]}
        onClick={handleClickNotWant}
      >
        {translate("/expert.out_of_credits_modal_not_want")}
      </Button>
    </>
  );
}

export default OutOfCreditsModal;
