import {
    Box,
    Button,
    Drawer,
    DrawerBody,
    DrawerCloseButton,
    DrawerContent,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    FormControl,
    FormLabel,
    Input,
  } from "@chakra-ui/react";
  import * as yup from "yup";
  import React, { useState } from "react";
  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 IOArtifactsVideo = ({ isOpen, onClose, secondField }) => {
    const [file, setFile] = useState("");
    const [fileName, setFileName] = useState("");
    const [alert, setAlert] = useState(false);
  
    const {
      reset,
      control,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(investmentDoct),
    });
  
    const onSubmit = (data) => {
      setIOArtifactsTwo((prevIOArtifactsTwo) => [
        {
          ...data,
          status: true,
          id: uuidv4(),
          createdAt: new Date().toISOString(),
        },
        ...prevIOArtifactsTwo,
      ]);
      setAlert(false);
      onClose();
    };
  
    return (
      <>
        <Drawer
          placement="right"
          initialFocusRef={secondField}
          isOpen={isOpen}
          onClose={onClose}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader fontSize={"sm"}>IO Artifacts</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"}>Vimeo video link *</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={"forestGreen"}
                rounded={"sm"}
                size={"sm"}
                mr={3}
                onClick={onClose}
              >
                Cancel
              </Button>
              <Button
                colorScheme={"forestGreen"}
                rounded={"sm"}
                size={"sm"}
                onClick={() => setAlert(true)}
              >
                Save
              </Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
        <CustomAlertDialog
          isOpen={alert}
          onClose={() => setAlert(false)}
          alertHandler={handleSubmit(onSubmit)}
          message={"Are you sure you want to add this document?"}
        />
      </>
    );
  };
  
  export default IOArtifactsVideo;