import React, { useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Box, Button, HStack, Input, InputGroup, InputRightAddon, Textarea, useDisclosure, Image, Icon, VStack, Text, useToast } from "@chakra-ui/react";
import {
  FormControl,
  FormLabel,
  FormHelperText,
} from "@chakra-ui/react";
import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
import SelectInvestorModal from "./SelectInvestorModal";
import { Controller, useForm } from "react-hook-form"; // Import useForm
import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup
import * as Yup from "yup"; // Import Yup for validation
import { motion } from 'framer-motion'; // Import Framer Motion for animations
import { bytesToMB } from "../../Constants/Constants";
import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service";
import ToastBox from "../../Components/ToastBox";
import { useNavigate } from "react-router-dom";
import CurrencyInput from "../../Components/CurrencyInput";

// Validation schema using Yup
const validationSchema = Yup.object().shape({
  investorName: Yup.string().required("Investor name is required"),
  clientId: Yup.string().required("Client ID is required"),
  transaction_date: Yup.date()
  .required('Date is required')
  .transform((value, originalValue) => {
    return originalValue === "" ? null : value; // Convert empty strings to null
  })
  .typeError('Please enter a valid date').max(new Date(), "Date cannot be in the future"),
  transaction_amount: Yup.number()
  .required("Transaction amount is required")
  .transform((value, originalValue) => originalValue === "" ? null : value) // Convert empty strings to null
  .typeError('Transaction amount must be a number') // Custom error message if it's not a number
  .positive('Transaction amount must be greater than zero'),
  spportFile_path: Yup.mixed().required("Support file is required"),
  makerComment: Yup.string(),
});

const CreateRequest = () => {
  const toast = useToast()
  const navigate=useNavigate()
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [selectedInvestor, setSelectorInvestor] = useState({});
  const [filePreview, setFilePreview] = useState(null); // State for previewing the file
  const [fileType, setFileType] = useState(null); // State to store file type for conditional rendering
  const[ isLoading, setIsLoading ] = useState(false)
  const [id, setId ] = useState(null)

  // Initialize useForm with the resolver for Yup validation
  const {control, register, handleSubmit, setValue,reset, formState: { errors } } = useForm({
    resolver: yupResolver(validationSchema),
  });


  const [ creatFawaateerRequest ] = useCreateFawateerRequestMutation()


  const onSubmit = async (data) => {
    console.log(data);
    setIsLoading(true)
  
    // Convert data to FormData
    const formData = new FormData();
    
   // Append each field from the data object to the FormData
   Object.keys(data).forEach((key) => {
    if (key === "spportFile_path" && data[key] instanceof FileList) {
      // Append the first file from FileList (assuming single file input)
      formData.append(key, data[key][0]); // Append the file
    } else {
      formData.append(key, data[key]); // Append other fields
    }
  });
  
    try {
      // Make the API call with formData
      const res = await creatFawaateerRequest({ data: formData, id });
      
      if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
        setIsLoading(false);
        reset()
        return
      } else if (res?.data) {
        toast({
          render: () => (
            <ToastBox message={res?.data?.message} />
          ),
        });
        setIsLoading(false);
        navigate('/fawateer-history')
        return
      } else {
        toast({
          render: () => (
            <ToastBox status={'error'} message={"Something went wrong"} />
          ),
        });
        setIsLoading(false);
        return
      }
  
    } catch (error) {
      console.error("Error:", error);
      toast({
        render: () => (
          <ToastBox status={'error'} message={"An error occurred"} />
        ),
      });
      setIsLoading(false);
      return
    }
  };
  

  // Handle file change and preview
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    console.log(file);
    setValue("spportFile_path", file); // Set the file value in the form
    setFileType(file); // Set the file type

    if (file && file.type.startsWith("image/")) {
      // If the file is an image, generate a preview
      const reader = new FileReader();
      reader.onload = () => {
        setFilePreview(reader.result); // Set the image preview
      };
      reader.readAsDataURL(file);
    } else {
      setFilePreview(null); // Clear preview if the file is not an image
    }
  };




  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <Box
        display={"flex"}
        justifyContent={"space-between"}
        flexWrap={'wrap'}
        alignItems={"center"}
        mt={5}
        px={4}
        as="form"
        onSubmit={handleSubmit(onSubmit)}
      >
        {/* Investor Name Field */}
        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.investorName}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Investor name
          </FormLabel>
          <InputGroup size='sm'>
            <Input
              bg={"#F5F8F6"}
              focusBorderColor="forestGreen.300"
              size={"sm"}
              fontSize={"sm"}
              rounded={"sm"}
              type={"text"}
              readOnly={true}
              placeholder={"Investor name"}
              {...register("investorName")}
              _placeholder={{ fontSize: "sm" }}
            />
            <InputRightAddon gap={2} color={'forestgreen.400'} onClick={onOpen} cursor={'pointer'} fontWeight={600} fontSize={'xs'}>
              <Search2Icon /> Search
            </InputRightAddon>
          </InputGroup>
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.investorName?.message}</FormHelperText>
        </FormControl>

        {/* Client ID Field */}
        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.clientId}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Client Id
          </FormLabel>
          <Input
            bg={"#F5F8F6"}
            focusBorderColor="forestGreen.300"
            size={"sm"}
            fontSize={"sm"}
            rounded={"sm"}
            type={"text"}
            readOnly={true}
            placeholder={"Client ID"}
            {...register("clientId")}
          />
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.clientId?.message}</FormHelperText>
        </FormControl>

        {/* Date Field */}
        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.date}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Date
          </FormLabel>
          <Input
            bg={"#F5F8F6"}
            focusBorderColor="forestGreen.300"
            size={"sm"}
            fontSize={"sm"}
            rounded={"sm"}
            type={"date"}
            max={new Date().toISOString().split("T")[0]} // Disable future dates
            {...register("transaction_date")}
          />
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_date?.message}</FormHelperText>
        </FormControl>

        {/* Amount Field */}
        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.amount}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Amount (BHD)
          </FormLabel>
          <Controller
                  name="transaction_amount"
                  control={control}
                  render={({ field }) => (
                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
                  )}
                />
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>
            {errors.transaction_amount?.message}
            </FormHelperText>
        </FormControl>

        {/* Support File Field with Preview */}
        <FormControl  isRequired  w={"49%"} mb={2} isInvalid={errors.spportFile_path}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Support file
          </FormLabel>
          <Input
            bg={"#F5F8F6"}
            focusBorderColor="forestGreen.300"
            size={"sm"}
            fontSize={"sm"}
            rounded={"sm"}
            type={"file"}
            className="form-control"
            name="spportFile_path"
            placeholder={"Support file"}
            {...register("spportFile_path")}
            // onChange={handleFileChange}
          />
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.spportFile_path?.message}</FormHelperText>

          {/* Animated Preview */}
          {filePreview && fileType?.type.startsWith("image/") && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5 }}
              style={{ marginTop: "10px" }}
            >
              <Box  position={'relative'} display={'flex'} alignContent={'flex-end'} gap={3}   mt={2}>
                <Image  src={filePreview} alt="File preview" maxW={"150px"} borderRadius="md" boxShadow="md" />
                <Icon  onClick={()=> setFilePreview(null)} className="link" rounded={'md'} color={'red.700'} cursor={'pointer'} p={1.5}  position={'absolute'} top={0} right={0} as={DeleteIcon} boxSize={7} />
                <VStack justifyItems={'flex-end'} alignItems={'flex-start'}>
                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Name: <Text as={'span'} color={'GrayText'}> {fileType?.name}</Text></Text>
                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Size: <Text as={'span'} color={'GrayText'}> {bytesToMB(fileType?.size)} Mb</Text></Text>
                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Type: <Text as={'span'} color={'GrayText'}> {fileType?.type}</Text></Text>

                </VStack>
              </Box>
            </motion.div>
          )}
        </FormControl>

        {/* Description Field */}
        <FormControl  w={"100%"} mb={2} isInvalid={errors.makerComment}>
          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
            Description
          </FormLabel>
          <Textarea
            bg={"#F5F8F6"}
            focusBorderColor="forestGreen.300"
            size={"sm"}
            fontSize={"sm"}
            rounded={"sm"}
            placeholder={"Description"}
            {...register("makerComment")}
          />
          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.makerComment?.message}</FormHelperText>
        </FormControl>

        {/* Submit Button */}
        <HStack mt={2} w={'100%'} justifyContent={'flex-end'}>
          <Button 
            colorScheme="forestGreen"
            size={"sm"}
            rounded={"sm"}
            fontSize={"xs"}
            type="submit"
            isLoading={isLoading}
          >
            Create request
          </Button>
        </HStack>
      </Box>

      <SelectInvestorModal setId={setId} setValue={setValue} onClose={onClose} isOpen={isOpen} onOpen={onOpen}/>
    </Box>
  );
};

export default CreateRequest;