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 { useDepositRejectMutation } from "../../../Services/drawal.request.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 DrawalRequestReject = ({ isOpen, onClose, firstField ,id}) => {
    const [isBtnLoading , setIsBtnLoading] = useState(false)
  
    const toast = useToast()
  
    const {
      register,
      watch,
      reset,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(conformModalSchema),
    });
  
    const [ depositReject ] = useDepositRejectMutation()
    
  
    const onSubmit = async(data) => {
      setIsBtnLoading(true)
      try {
        const res = await depositReject({ id ,data})
    
        if (res?.error) {
          toast({
            render: () => (
              <ToastBox message={res?.error?.data?.message} status={"error"} />
            ),
          });
          heandleOnClose()
          
        }else if(res?.data?.statusCode === 200) {
          toast({
            render: () => (
              <ToastBox message={res?.data?.message} />
            ),
          });
          heandleOnClose()
        } 
        
      } catch (error) {
        console.log(error);
        
      }
  
    };

  
    const heandleOnClose = () =>{
      reset()
      onClose()
      setIsBtnLoading(false)
    }
  
    return (
      <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
        <ModalOverlay />
        <ModalContent pb={4}>
          <ModalHeader fontSize={"md"}>Reject</ModalHeader>
          <ModalCloseButton />
          <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">
                <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
                  {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 DrawalRequestReject;
  