import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
  Stack,
  useToast,
} from "@chakra-ui/react";
import * as yup from "yup";
import React, { useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import { v4 as uuidv4 } from "uuid";
import { useCreateVideoArtifactsMutation, useDeleteVideoArtifactsMutation } from "../../../Services/io.service";
import { useParams } from "react-router-dom";
import ToastBox from "../../../Components/ToastBox";

const investmentVideoSchema = yup.object().shape({
  artifactName: yup.string().required("Artifact name is required"),
  artifactStreamingURL: yup.string().required("Artifact streaming URL is required").url("Invalid URL format"),
});

const IOArtifactsAdd = ({  isOpen, onClose, firstField }) => {
  const params = useParams()
  const id = params?.id
  const [file, setFile] = useState("");
  const [fileName, setFileName] = useState("");
  const [ isLoading, setIsLoading] = useState(false)
  const [alert, setAlert] = useState(false);
  const toast = useToast();

  const [ createArtifactsVideo ] = useCreateVideoArtifactsMutation()
  // const {
  //   data
  // } = useGetArtifactsQuery(id)

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(investmentVideoSchema),
  });

  const onSubmit = async (data) => {
    setIsLoading(true)

    try {
      const res = await createArtifactsVideo({data, id})
      if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        }); 
      setAlert(false);
      setIsLoading(false)
      handleClose();
      }

      
    } catch (error) {
      console.log(error);
      
    }
    
  };



  const handleConfirm = () => {
    handleSubmit(onSubmit)();
  };

  const handleSave = () => {
    handleSubmit(onSubmit)();
  };

  const handleClose = () => {
    onClose()
    reset()
  }

  return (
    <>
      <Drawer
      size={"md"}
        isOpen={isOpen}
        placement="right"
        initialFocusRef={firstField}
        onClose={handleClose}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader fontSize={"sm"}>IO Artifacts Video</DrawerHeader>

          <DrawerBody>
            <Stack spacing={4}>
              <FormControl isInvalid={errors.artifactName}>
                <FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
                <Controller
                  name="artifactName"
                  control={control}
                  render={({ field }) => (
                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.artifactName?.message}
                </FormErrorMessage>
              </FormControl>

              <FormControl isInvalid={errors.artifactStreamingURL}>
                <FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
                <Controller
                  name="artifactStreamingURL"
                  control={control}
                  render={({ field }) => (
                    <Input {...field} fontSize={"sm"} type="url" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.artifactStreamingURL?.message}
                </FormErrorMessage>
              </FormControl>
            </Stack>
          </DrawerBody>

          <DrawerFooter>
            <Button
              variant="outline"
              colorScheme={"forestGreen"}
              rounded={"sm"}
              size={"sm"}
              mr={3}
              onClick={handleClose}
            >
              Cancel
            </Button>

            <Button
              colorScheme={"forestGreen"}
              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 artifact?"}
        isLoading={isLoading}
      />
    </>
  );
};

export default IOArtifactsAdd;