import {
    Box,
    Button,
    Drawer,
    DrawerBody,
    DrawerCloseButton,
    DrawerContent,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    FormControl,
    FormLabel,
    Input,
    InputGroup,
    Stack,
  } from "@chakra-ui/react";
  import * as yup from "yup";
  import React, { useContext, useEffect, useRef, useState } from "react";
  import FormInputMain from "../../Components/FormInputMain";
  import { useForm } from "react-hook-form";
  import { yupResolver } from "@hookform/resolvers/yup";
  import CustomAlertDialog from "../../Components/CustomAlertDialog";
  
  export const investmentDoct = yup.object().shape({
    type: yup.string().required("Sponser name is required"),
    document: yup.string().required("Sponser name is required"),
    fileName: yup.string().required("Mobile no is required"),
  });
  
  const KeyMeritsAdd = ({ id, isOpen, onClose, firstField }) => {
    const [file, setFile] = useState("");
    const [fileName, setFileName] = useState("");
    const [alert, setAlert] = useState(false);
  
    const {
      control,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(investmentDoct),
    });
  
  
  
    const onSubmit = (data) => {
      console.log(data);
      setSponser([
        {
          ...data,
          status: true,
          id: uuidv4(),
          createdAt: new Date().toISOString(),
        },
        ...investmentDoct,
      ]);
    };
  
    const handleSave = () => {
      console.log({
        fileName: fileName,
        file:file
      });
      setAlert(false)
      onClose()
  
    }
  
    return (
      <>
        <Drawer 
          isOpen={isOpen}
          placement="right"
          initialFocusRef={firstField}
          onClose={onClose}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader fontSize={"sm"}>Key Merits</DrawerHeader>
  
            <DrawerBody>
  
              <FormControl mb={4}>
                <FormLabel fontSize={"sm"}>Title</FormLabel>
                <Input
                  value={fileName}
                  onChange={(e) => setFileName(e.target.value)}
                  fontSize={"sm"}
                  type="text"
                  size={"sm"}
                />
              </FormControl>
              <FormControl mb={4}>
                <FormLabel fontSize={"sm"}>Sub Title</FormLabel>
                <Input
                  value={fileName}
                  onChange={(e) => setFileName(e.target.value)}
                  fontSize={"sm"}
                  type="textarea"
                  size={"sm"}
                />
              </FormControl>
              <FormControl mb={4}>
                <FormLabel fontSize={"sm"}>Icon</FormLabel>
                <Input
                  value={file}
                  onChange={(e) => setFile(e.target.value)}
                  fontSize={"sm"}
                  type="file"
                  className="form-control"
                  size={"sm"}
                />
              </FormControl>
  
            </DrawerBody>
            <DrawerFooter>
              <Button
                variant="outline"
                colorScheme={"green"}
                rounded={"sm"}
                size={"sm"}
                mr={3}
                onClick={onClose}
              >
                Cancel
              </Button>
  
              <Button
                colorScheme={"green"}
                rounded={"sm"}
                size={"sm"}
                onClick={() => setAlert(true)}
              >
                Save
              </Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
        <CustomAlertDialog
          isOpen={alert}
          onClose={() => setAlert(false)}
          alertHandler={handleSave}
          message={"Are you sure you want to add this document?"}
        />
      </>
    );
  };
  
  export default KeyMeritsAdd;