import {
    Box,
    Button,
    FormControl,
    FormLabel,
    Input,
    Modal,
    ModalBody,
    ModalCloseButton, 
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Text,
    Textarea,
    useDisclosure,
  } from "@chakra-ui/react";
  import React from "react";
  import * as yup from "yup";
  import { yupResolver } from "@hookform/resolvers/yup";
  import { useForm } from "react-hook-form";
  
  export const conformModalSchema = yup.object().shape({
      comment: yup.string().required("Comment is required"),
  });
  
  const RejectModal = ({ isOpen, onClose, firstField }) => {
    const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(conformModalSchema),
    });
  
    const onSubmit = (data) => {
      console.log(data);
      setFile(data.document[0]);
  
      const newDocument = {
        ...data,
        document: data.document[0].name, // Store the document name
        comment: true,
        id: uuidv4(),
        Type: getFileIcon(file.type),
      };
  
      setCreate((prevCreate) => [...prevCreate, newDocument]);
      onClose();
    };
  
    const handleFileChange = (event) => {
      const selectedFile = event.target.files[0];
      setFile(selectedFile);
    };
  
    return (
      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
        <ModalOverlay />
        <ModalContent pb={4}>
          <ModalHeader fontSize={"md"}>Reject</ModalHeader>
          <ModalCloseButton />
          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
            <ModalBody>
              <FormControl mb={4}>
                <FormLabel fontSize="sm">Comment</FormLabel>
                <Textarea rows={6} 
                focusBorderColor='green.400'
                  name="fileName"
                  {...register("fileName")}
                  fontSize="sm"
                  type="textarea"
                  size="md"
                  placeholder={"$100,000"}
                  rounded={'md'}
                  resize={'none'}
                />
                {errors.comment && (
                  <Text fontSize="xs" color="red">
                    {errors.comment.message}
                  </Text>
                )}
              </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'}>
                Send
              </Button>
            </ModalFooter>
          </Box>
        </ModalContent>
      </Modal>
    );
  };
  
  export default RejectModal;
  