import {
  Box,
  Button,
  FormControl,
  FormHelperText,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import ToastBox from "../../../../Components/ToastBox";
import { useRejectIOCaseMutation } from "../../../../Services/io.service";

export const conformModalSchema = yup.object().shape({
  comments: yup.string().required("Comment is required")
  .max(200, "Approve Comment cannot be more than 200 characters"),
});

const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
  const [isBtnLoading , setIsBtnLoading] = useState(false)

  const toast = useToast()

  const {
    register,
    reset,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(conformModalSchema),
  });

  const [ rejectIOCase ] = useRejectIOCaseMutation()
  

  const onSubmit = async(data) => {
    console.log(data, "tewxttttt");
    setIsBtnLoading(true)
    try {
      const res = await rejectIOCase({data,id})
      if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
        setIsBtnLoading(false)
      }else if(res?.data){
        toast({
          render: () => (
            <ToastBox message={res?.data?.message} />
          ),
        });
        onClose()
        setIsBtnLoading(false)
      }else{
        toast({
          render: () => (
            <ToastBox status={'error'} message={"Something went wrong"} />
          ),
        });
        setIsBtnLoading(false)
      }
    } catch (error) {
      
    }
  };

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };


  const { data, isLoading } = 
  (id, {
    skip: !id,
  });

  useEffect(() => {
    if (data) {
      reset({
        investorAmount: data?.data?.investorAmount,
      });
    }
  }, [data, reset]);

  const heandleOnClose = () =>{
    reset()
    onClose()
  }

  return (
    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
      <ModalOverlay />
      <ModalContent pb={4}>
        <ModalHeader fontSize={"md"}>Reject Comment</ModalHeader>
        <ModalCloseButton />
        {isLoading ? (
          <FullscreenLoaders height={"50vh"} />
        ) : (
        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
          <ModalBody>
            <FormControl mb={4} isRequired>
              <FormLabel fontSize="sm">Comment</FormLabel>
              <Textarea
                rows={6}
                focusBorderColor="green.400"
                name="comments"
                {...register("comments")}
                fontSize="sm"
                type="textarea"
                size="md"
                placeholder={"Enter your comments...."}
                rounded={"md"}
                resize={"none"}
                maxLength={200}
              />
              {errors.comments && (
                <Text fontSize="xs" color="red">
                  {errors.comments.message}
                </Text>
              )}
              <FormHelperText fontSize="xs" color="gray.500">
                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
                 {watch("comments")?.length || 0} characters.
              </FormHelperText>
            </FormControl>
          </ModalBody>
          <ModalFooter>
            <Button
              colorScheme="gray"
              mr={3}
              onClick={onClose}
              size={"sm"}
              rounded={"sm"}
            >
              Cancel
            </Button>
            <Button
              colorScheme="forestGreen"
              variant="solid"
              size={"sm"}
              rounded={"sm"}
              isLoading={isBtnLoading}
              type="submit"
            >
              Send
            </Button>
          </ModalFooter>
        </Box>
        )}
      </ModalContent>
    </Modal>
  );
};

export default RequestRejectModal;