import {
    Button,
    DrawerFooter,
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalHeader,
    ModalOverlay,
    Stack,
    useToast,
  } from "@chakra-ui/react";
  import * as yup from "yup";
  import React, { useState, useEffect, useContext } from "react";
  import { useForm, Controller } from "react-hook-form";
  import { yupResolver } from "@hookform/resolvers/yup";
  import { v4 as uuidv4 } from "uuid";
  import { useParams } from "react-router-dom";
  import CustomAlertDialog from "../Components/CustomAlertDialog";
  import ToastBox from "../Components/ToastBox";
  import GlobalStateContext from "../Contexts/GlobalStateContext";
  import CurrencyInput from "../Components/CurrencyInput";
  
  const ioNav = yup.object().shape({
    transactionDate: yup.string().required("Date is required"),
    transactionAmount: yup.string().required("New NAV is required"),
    comments: yup
      .string()
      .notRequired()
      .max(200, "Approve Comment cannot be more than 200 characters"),
  });
  
  const ForgetPassword = ({
    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 [showPassword, setShowPassword] = useState(false);
    const [subject, setSubject] = useState("");
    // ======================[ Cotext Api ]
    const { IODetails } = useContext(GlobalStateContext);
    const found = data?.find((item) => item?.id === actionId);
  
    // const [addNavDetails] = useAddNavDetailsMutation()
    // const {
    //   data
    // } = useGetArtifactsQuery(id)
  
    const {
      control,
      handleSubmit,
      watch,
      reset,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(ioNav),
    });
  
  //   const onSubmit = async (data) => {
  //     setIsLoading(true);
  
  //     try {
  //       const res = await addNavDetails({ data, id });
  //       if (res?.data?.statusCode === 201) {
  //         setIsLoading(false);
  //         toast({
  //           render: () => <ToastBox message={res?.data?.message} />,
  //         });
  //         handleClose();
  //       } else if (res?.error?.status === 400) {
  //         toast({
  //           render: () => (
  //             <ToastBox message={res?.error?.data?.message} status={"error"} />
  //           ),
  //         });
  //         handleClose();
  //       }
  //     } catch (error) {
  //       console.log(error);
  //     }
  //   };
  
    const handleSave = () => {
      handleSubmit(onSubmit)();
    };
  
    const handleClose = () => {
      setIsLoading(false);
      setAlert(false);
      onClose();
    };
    
  
    return (
      <>
        <Modal
          // closeOnOverlayClick={false}
          isOpen={isOpen}
          onClose={onClose}
          initialFocusRef={firstField}
        >
          <ModalOverlay />
          <ModalContent>
            <ModalHeader fontSize={"md"}>Forget Password</ModalHeader>
            <ModalCloseButton />
            <ModalBody pb={4}>
              <Stack spacing={4}>
                <FormControl isInvalid={errors.ChangePassword}>
                  <FormLabel fontSize={"sm"} mb={3} fontWeight={500}>Email, Phone, or UserName</FormLabel>
                  <Input
                      size={"md"}
                      onChange={(e) => setSubject(e.target.value)}
                      focusBorderColor="forestGreen.300"
                      rounded={4}
                      // type={showPassword ? "text" : "password"}
                      type="text"
                  />
                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                    {errors.ChangePassword?.message}
                  </FormErrorMessage>
                </FormControl>
              </Stack>
            </ModalBody>
  
            <DrawerFooter mb={5}>
              {/* <Button
              //   variant="outline"
                bg={"#e0ebeb"}
                rounded={"sm"}
                size={"sm"}
                mr={3}
                onClick={handleClose}
              >
                Cancel
              </Button> */}
  
              <Button
                w={"100%"}
                colorScheme={"forestGreen"}
                rounded={"md"}
                size={"md"}
                onClick={() => setAlert(true)}
                fontWeight={400}
              >
                Send Login Link
              </Button>
            </DrawerFooter>
          </ModalContent>
        </Modal>
  
        <CustomAlertDialog
          isOpen={alert}
          onClose={() => setAlert(false)}
          alertHandler={handleSave}
          message={"Are you sure you want to change password?"}
          isLoading={isLoading}
        />
      </>
    );
  };
  
  export default ForgetPassword;