import {
  Box,
  Button,
  Checkbox,
  FormControl,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
  useDisclosure,
} from "@chakra-ui/react";
import React, { useState } from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import ReactQuill from "react-quill";

export const conformModalSchema = yup.object().shape({
  fees: yup.string().required("File name is required"),
  totalAmount: yup.string().required("File name is required"),
});

const ConfirmModal = ({ isOpen, onClose, firstField }) => {

  const [emailApproval,setEmailApproval] = useState(false)

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

  const onSubmit = (data) => {
    setFile(data.document[0]);

    const newDocument = {
      ...data,
      document: data.document[0].name, // Store the document name
      status: true,
      id: uuidv4(),
      createdAt: new Date().toISOString(),
      Type: getFileIcon(file.type),
    };

    setCreate((prevCreate) => [...prevCreate, newDocument]);
    onClose();
  };

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  }; 
  
  const modules = {
    toolbar: [
      //   [{ header: "1" }, { header: "2" },
      //   // { font: [] }
      // ],
      // [{ size: [] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["clean"],
    ],
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
      <ModalOverlay />
      <ModalContent pb={4}>
        <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
        <ModalCloseButton />
        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
          <ModalBody>
          <FormControl mb={4} isRequired>
            <FormLabel fontSize="sm">Comment</FormLabel>
              <Textarea rows={5} 
               focusBorderColor='green.400'
                name="fileName"
                {...register("fileName")}
                fontSize="sm"
                type="textarea"
                size="md"
                placeholder={"Enter your comments...."}
                rounded={'md'}
                resize={'none'}
              />
              {errors.comment && (
                <Text fontSize="xs" color="red">
                  {errors.comment.message}
                </Text>
              )}
            </FormControl>
            
            <Checkbox colorScheme='forestGreen'
             onChange={(e) =>setEmailApproval(e.target.checked)}
            >
              <Text mb={0} fontSize={'sm'}>Send an email to the user upon approval</Text>
            </Checkbox>
            {emailApproval && <Box className="messageBox">
              <FormControl mb={4}>
                <FormLabel fontSize="sm" mb={1}>Subject</FormLabel>
                <Input 
                  focusBorderColor='green.400'
                  name="fileName"
                  {...register("fileName")}
                  fontSize="sm"
                  type="text"
                  size="sm"
                />
              </FormControl>
              <FormControl mb={12}>
                <FormLabel fontSize="sm" mb={1}>Message</FormLabel>
                <ReactQuill
                  theme="snow"
                  style={{
                    height: 150,
                  }}
                  // value={value}
                  // onChange={setValue}
                  modules={modules}
                  placeholder="Start typing here..."
                />
              </FormControl>
            </Box>}
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
              Cancel
            </Button>
            <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
              Confirm
            </Button>
          </ModalFooter>
        </Box>
      </ModalContent>
    </Modal>
  );
};

export default ConfirmModal;
