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 InvestmentDocuments = ({ 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"}>Add Details</DrawerHeader>

          <DrawerBody>

            <FormControl mb={4}>
              <FormLabel fontSize={"sm"}>File Name</FormLabel>
              <Input
                value={fileName}
                onChange={(e) => setFileName(e.target.value)}
                fontSize={"sm"}
                type="text"
                size={"sm"}
              />
            </FormControl>
            <FormControl mb={4}>
              <FormLabel fontSize={"sm"}>File Name</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 InvestmentDocuments;
