import {
    Box,
    Button,
    FormControl,
    FormLabel,
    Input,
    Modal,
    ModalBody,
    ModalCloseButton,
    ModalContent,
    ModalFooter,
    ModalHeader,
    ModalOverlay,
    Text,
    Textarea,
    useDisclosure,
    useToast,
  } from "@chakra-ui/react";
  import React, { useEffect, useState } from "react";
  import * as yup from "yup";
  import { yupResolver } from "@hookform/resolvers/yup";
  import { useForm } from "react-hook-form";
  import ToastBox from "../../../../Components/ToastBox";
import { useDepositRejectMutation } from "../../../../Services/drawal.request.service";
import { useUpdateBanMutation, useUpdateUnbanMutation } from "../../../../Services/ban.investor.service";
  
  export const conformModalSchema = yup.object().shape({
    comments: yup.string().required("Comment is required"),
  });
  
  const ReasonBanModal = ({ isOpen, onClose, firstField ,id}) => {
    const [isBtnLoading , setIsBtnLoading] = useState(false)
  
    const toast = useToast()
  
    const {
      register, 
      reset,
      handleSubmit,
      formState: { errors },
    } = useForm({
      resolver: yupResolver(conformModalSchema),
    });
  
    const [ updateBan ] = useUpdateUnbanMutation()

    
    
    
  
    const onSubmit = async(data) => {
      console.log(data);
      setIsBtnLoading(true)
      try {
        const res = await updateBan({ id ,data})
        console.log(res);
    
        if (res?.error) {
          toast({
            render: () => (
              <ToastBox message={res?.error?.data?.message} status={"error"} />
            ),
          });
          heandleOnClose()
          
        }else if(res?.data) {
          toast({
            render: () => (
              <ToastBox message={res?.data?.message} />
            ),
          });
          heandleOnClose()
        } 
        
      } catch (error) {
        console.log(error);
        
      }
  
    };

  
    const heandleOnClose = () =>{
      reset()
      onClose()
      setIsBtnLoading(false)
    }
  
    return (
      <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
        <ModalOverlay />
        <ModalContent pb={4}>
          <ModalHeader fontSize={"md"}>Reason for Ban</ModalHeader>
          <ModalCloseButton />
          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
            <ModalBody>
              <FormControl mb={4} isRequired>
                <FormLabel fontSize="sm">Comment</FormLabel>
                <Textarea
                  rows={6}
                  focusBorderColor="green.400"
                  name="comments"
                  {...register("comments")}
                  fontSize="sm"
                  type="textarea"
                  size="md"
                  placeholder={"Enter your comments...."}
                  rounded={"md"}
                  resize={"none"}
                />
                {errors.comments && (
                  <Text fontSize="xs" color="red">
                    {errors.comments.message}
                  </Text>
                )}
              </FormControl>
            </ModalBody>
            <ModalFooter>
              <Button
                colorScheme="gray"
                mr={3}
                onClick={onClose}
                size={"sm"}
                rounded={"sm"}
              >
                Cancel
              </Button>
              <Button
                colorScheme="forestGreen"
                variant="solid"
                size={"sm"}
                rounded={"sm"}
                isLoading={isBtnLoading}
                type="submit"
                fontWeight={400}
              >
                Save
              </Button>
            </ModalFooter>
          </Box>
        </ModalContent>
      </Modal>
    );
  };
  
  export default ReasonBanModal;
  