import {
    Box,
    Button,
    Drawer,
    DrawerBody,
    DrawerCloseButton,
    DrawerContent,
    DrawerFooter,
    DrawerHeader,
    DrawerOverlay,
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Stack,
    Textarea,
    useToast,
  } from "@chakra-ui/react";
  import * as yup from "yup";
  import React, { useState, useEffect } 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, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
  import { useParams } from "react-router-dom";
  import ToastBox from "../../../Components/ToastBox";
  
  const investmentVideoSchema = yup.object().shape({
    transactionDate: yup.string().required("Artifact name is required"),
    ioTransType_xid: yup.number().required("Artifact name is required"),
    transactionAmount: yup.number().required("Artifact name is required"),
    comments: yup.string().notRequired(),
  });
  
  const AddCashDetails = ({  isOpen, onClose, firstField, actionId, setActionId, data}) => {
    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 found = data?.find((item) => item?.id === actionId);
    console.log(found);
  
    const [ createArtifactsVideo ] = useCreateVideoArtifactsMutation()
    const [ updateVideoArtifacts ] = useUpdateVideoArtifactsMutation()
    // const {
    //   data
    // } = useGetArtifactsQuery(id)
  
    const {
      control,
      handleSubmit,
      watch,
      reset,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(investmentVideoSchema),
    });
  
  
  
  
    const onSubmit = async (data) => {
      console.log(data);
      
      // setIsLoading(true)
  
  
  
      // try {
       
  
      //   if (found) {
      //     const res = await updateVideoArtifacts({data, id: found?.id})
      //     if (res?.data?.statusCode === 200) {
      //       toast({
      //         render: () => <ToastBox message={res?.data?.message} />,
      //       }); 
      //     setAlert(false);
      //     setIsLoading(false)
      //     handleClose();
      //     }
      //   } else {
  
      //     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 Cash Details</DrawerHeader>
  
            <DrawerBody>
              <Stack spacing={4}>
                <FormControl isInvalid={errors.transactionDate}>
                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
                  <Controller
                    name="transactionDate"
                    control={control}
                    render={({ field }) => (
                      <Input {...field} fontSize={"sm"} type="date" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.transactionDate?.message}
                  </FormErrorMessage>
                </FormControl>
  
                <FormControl isInvalid={errors.ioTransType_xid}>
                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
                  <Controller
                    name="ioTransType_xid"
                    control={control}
                    render={({ field }) => (
                      <Input {...field} textAlign={'end'} fontSize={"sm"} type="number" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.ioTransType_xid?.message}
                  </FormErrorMessage>
                </FormControl>




                <FormControl isInvalid={errors.transactionAmount}>
                  <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
                  <Controller
                    name="transactionAmount"
                    control={control}
                    render={({ field }) => (
                      <Input {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.transactionAmount?.message}
                  </FormErrorMessage>
                </FormControl>



                <FormControl isInvalid={errors.comments}>
                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
                  <Controller
                    name="comments"
                    control={control}
                    render={({ field }) => (
                      <Textarea {...field} textAlign={'right'} fontSize={"sm"} type="text" size={"sm"} />
                    )}
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.comments?.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 cash details?"}
          isLoading={isLoading}
        />
      </>
    );
  };
  
  export default AddCashDetails;