import { useState } from "react";
import { Grid } from "../../components/Grid/Grid";
import Button from "../../components/Button/Button";
import Textfield from "../../components/Textfeild/Textfeild";
import { useApiMutation } from "../../utils/useApiRequest";
import { useToast } from "../../hooks/useToast";
import { useModalStore } from "../../context/zustand-store/appStore";

export const OtpVerifyModal = ({ item, getData }: any) => {
  const showToast = useToast();
  const { closeModal } = useModalStore();
  const [code, setCode] = useState("");

  const mutation = useApiMutation({
    api: `/tag/web/api/v1/tag_distribution_batch/${item?.id}/otp_auth/?otp_type=check`,
    method: "post",
  });

  const onSubmit = async () => {
    if (!code) return;

    try {
      await mutation.mutateAsync({ code: String(code) });
      showToast("احراز با موفقیت انجام شد", "success");
      getData();
      closeModal();
    } catch (error: any) {
      showToast(error?.response?.data?.message || "خطا در احراز!", "error");
    }
  };

  return (
    <Grid container column className="gap-3">
      <Textfield
        fullWidth
        placeholder="کد احراز"
        value={code}
        onChange={(e) => setCode(e.target.value)}
      />

      <Button disabled={!code} onClick={onSubmit}>
        تایید
      </Button>
    </Grid>
  );
};
