import Button from "@/components/ChatsPath/ui/Button";
import styles from "./styles.module.scss";
import Loader, { LoaderColor } from "@/components/Loader";
import { useMemo } from "react";
import { getPriceCentsToDollars } from "@/services/price";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import { IFunnelPaymentVariant } from "@/api/resources/Session";

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

function RefillCreditsModal({
  isLoading = false,
  isError = false,
  products,
  handleClickButton,
}: IRefillCreditsModalProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const assistant = useSelector(selectors.selectCurrentAssistant);
  const currentProduct = useMemo(() => {
    return products.find((product) => product.key === "credits.100");
  }, [products]);

  return (
    <>
      <h3 className={styles.title}>
        {translate("/expert.refill_credits_modal_title")}
      </h3>
      <h4 className={styles.subtitle}>
        {translate("/expert.refill_credits_modal_description", {
          name: assistant?.name,
        })}
      </h4>
      <div role="button" className={styles.package}>
        <div className={styles.discount}>
          {translate("/expert.refill_credits_modal_discount")}
        </div>
        <div className={styles["description-wrapper"]}>
          <div className={styles.description}>
            <p className={styles["package-name"]}>
              {translate("/expert.refill_credits_modal_welcome_pack")}
            </p>
            <p className={styles["credits-amount"]}>
              {translate("/expert.credits", {
                // count: currentProduct?.description,
              })}
            </p>
          </div>
        </div>
        <div className={styles["price-wrapper"]}>
          <span className={styles["price-old"]}>$19.99</span>
          <span className={styles.price}>
            ${getPriceCentsToDollars(currentProduct?.price || 0)}
          </span>
        </div>
      </div>
      <div className={styles["button-wrapper"]}>
        <Button
          classNameContainer={styles.button}
          disabled={!currentProduct || isLoading}
          onClick={handleClickButton}
        >
          {isLoading && <Loader color={LoaderColor.White} />}
          {!isLoading && translate("continue")}
        </Button>
        {isError && (
          <span className={styles.error}>
            {translate("/expert.something_went_wrong")}
          </span>
        )}
      </div>
    </>
  );
}

export default RefillCreditsModal;
