"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";

import { Button, Spinner, Typography } from "@/components/ui";
import { useSingleCheckout } from "@/hooks/payment/useSingleCheckout";
import { useChatStore } from "@/providers/chat-store-provider";
import { IRefillModals, IRefillModalsProduct } from "@/services/socket/events";

import BenefitsList from "../BenefitsList/BenefitsList";
import RefillOptions from "../RefillOptions/RefillOptions";
import RefillOptionsHeader from "../RefillOptionsHeader/RefillOptionsHeader";

import styles from "./RefillOptionsModal.module.scss";

interface RefillOptionsModalProps {
  data: NonNullable<IRefillModals["products"]>;
  onTimerLeft?: () => void;
  onPaymentSuccess?: () => void;
  onPaymentError?: (error?: string) => void;
}

export default function RefillOptionsModal({
  data,
  onTimerLeft,
  onPaymentSuccess,
  onPaymentError,
}: RefillOptionsModalProps) {
  const t = useTranslations("RefillOptionsModal");

  const isAutoTopUp = useChatStore(state => state.isAutoTopUp);

  const { handleSingleCheckout, isLoading } = useSingleCheckout({
    onSuccess: onPaymentSuccess,
    onError: onPaymentError,
    returnUrl: typeof window !== "undefined" ? window.location.href : "",
  });

  const [selectedOption, setSelectedOption] = useState<IRefillModalsProduct>(
    data[1] ?? data[0]
  );

  const handlePayment = () => {
    if (isLoading) return;
    handleSingleCheckout({
      productId: selectedOption.id,
      key: selectedOption.key,
      isAutoTopUp,
    });
  };

  return (
    <div className={styles.container}>
      <RefillOptionsHeader onTimerLeft={onTimerLeft} />

      <RefillOptions
        className={styles.options}
        options={data}
        selectedOption={selectedOption}
        onChange={option => setSelectedOption(option)}
      />

      <Button className={styles.button} onClick={handlePayment}>
        {!isLoading && (
          <Typography
            color="white"
            weight="semiBold"
            className={styles.buttonText}
          >
            {t("button")}
          </Typography>
        )}
        {isLoading && <Spinner color="white" />}
      </Button>

      <BenefitsList />
    </div>
  );
}