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 { useApproveDistributedMutation } from "../../../../Services/io.service";
  
  export const conformModalSchema = yup.object().shape({
    // comments: yup.string().required("Comment is required")
    // .max(50, "Investment name cannot be more than 50 characters"),
    comments: yup
    .string()
    .required("Comment is required")
    .max(200, "Approve Comment cannot be more than 200 characters"),
  });
  
  const ApproveDistrubationModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
    const [isBtnLoading , setIsBtnLoading] = useState(false)
  
    const toast = useToast()

    
  
    const {
      register,
      reset,
      watch,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(conformModalSchema),
    });
  
    const [ approveDistributed ] = useApproveDistributedMutation()
    
  
    const onSubmit = async(data) => {
      setIsBtnLoading(true)
      try {
        const res = await approveDistributed({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()
          onBigModalClose()
          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"}>Approve 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 checker comment...."}
                  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={"xs"}
                rounded={"sm"}
              >
                Cancel
              </Button>
              <Button
                colorScheme="forestGreen"
                variant="solid"
                size={"xs"}
                rounded={"sm"}
                isLoading={isBtnLoading}
                type="submit"
              >
                Send
              </Button>
            </ModalFooter>
          </Box>
          )}
        </ModalContent>
      </Modal>
    );
  };
  
  export default ApproveDistrubationModal;
  