import {
  Alert,
  AlertIcon,
  Box,
  Button,
  FormControl,
  FormErrorMessage,
  FormLabel,
  HStack,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Switch,
  Table,
  Tbody,
  Text,
  Textarea,
  Th,
  Tr,
  useToast,
} from "@chakra-ui/react";
import NormalData from "../../../../Components/DataTable/NormalTable";
import { useContext, useState } from "react";
import { AddIcon } from "@chakra-ui/icons";
import {
  useGetDistributedToInvestorMutation,
  useGetDistributionInvestorMutation,
  useUpdateExitToInvestorMutation,
} from "../../../../Services/io.service";
import { useParams } from "react-router-dom";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import ToastBox from "../../../../Components/ToastBox";
import CurrencyInput from "../../../../Components/CurrencyInput";
import { IoCalculator } from "react-icons/io5";
import { debounce } from "../../../Master/Sponser/AddSponser";
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";

const Exit = ({ isOpen, onClose }) => {
  const params = useParams();
  const toast = useToast();
  const id = params?.id;
  const [isCalculateLoading, setIsCalculateLoading] = useState(false);
  const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
  const [calcualtedData, setCalculatedDate] = useState(null);
  const [isCalcualtedData, setIsCalcualtedData] = useState(false);
  const { IODetails } = useContext(GlobalStateContext);

  const investorExit = yup.object().shape({
    amount: yup
      .string()
      .required("Amount is required")
      .test(
        "max",
        `Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
        function (value) {
          const { ioCash } = IODetails || {}; // Safely get ioCash
          if (value && ioCash) {
            return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
          }
          return true; // If ioCash is not available, skip validation
        }
      ),
  });

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

  useEffect(() => {
    console.log("hiit     useEffectc");
    handleCalculate(id, {
      amount: IODetails?.ioMVNAV,
    });
    reset({
      amount: IODetails?.ioMVNAV,
    });
  }, [IODetails, id]);

  const handleCalculate = async (id, data) => {
    try {
      const res = await getDistributionInvestment({ id, data });
      console.log(res?.data?.data);

      if (res?.error?.status === 401) {
        // toast({
        //   render: () => (
        //     <ToastBox message={res?.error?.data?.message} status={"error"} />
        //   ),
        // });
        setIsCalculateLoading(false);
        setIsCalcualtedData(false);
      } else if (res?.data?.statusCode === 200) {
        setCalculatedDate(res?.data?.data);
        // toast({
        //   render: () => <ToastBox message={res?.data?.message} />,
        // });
        setIsCalculateLoading(false);
        setIsCalcualtedData(true);
      }
    } catch (error) {}
  };

  // const {
  //   data:IObyID,
  //   error,
  //   isLoading,
  // } = useGetDistributionInvestorMutation(id);

  const [getDistributionInvestment] = useGetDistributionInvestorMutation();
  const [getFinalDistributionInvestment] =
    useGetDistributedToInvestorMutation();
  const [updateExitToInvestor] = useUpdateExitToInvestorMutation();

  const investor = yup.object().shape({
    amount: yup.string().required("Amount is required"),
  });

  // useEffect(()=>{
  //   try {
  //     const res = getDistributionInvestment({id,data})
  //     console.log(res);

  //   } catch (error) {

  //   }
  // },[])

  // console.log(IObyID);

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
    "Client Id",
    "First name",
    "Last Name",
    "Amount",
    "Holding (%)",
    "Exit Amt($)",
  ];

  const extractedArray = calcualtedData?.data?.map((item, index) => ({
    id: item?.id,
    "Sr No.": (
      <Box
        w={9}
        display={"flex"}
        alignItems={"center"}
        isTruncated={true}
        h={25}
      >
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {index + 1}
        </Text>
      </Box>
    ),
    "Client Id": (
      <Box w={100} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.clientId}
        </Text>
      </Box>
    ),
    "First name": (
      <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.firstName}
        </Text>
      </Box>
    ),
    "Last Name": (
      <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.lastName}
        </Text>
      </Box>
    ),
    Amount: (
      <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.amount?.toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
        </Text>
      </Box>
    ),
    "Holding (%)": (
<Box minW={24} isTruncated={true}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
  {item?.investor_holidings?.toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}%
</Text>
</Box>
    ),
    "Exit Amt($)": (
      <Box minW={24} isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.distribution_amt?.toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
        </Text>
      </Box>
    ),
  }));

  const Total = () => {
    return (
      <Table size="sm">
        <Tbody>
          <Tr backgroundColor="gray.50">
            <Th
              textAlign={"left"}
              p={3}
              width="90px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              Total
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"left"}
              p={3}
              width="110px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {calcualtedData?.totalInvestedAmt?.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
            </Th>
            <Th
              textAlign={"left"}
              p={3}
              width="90px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
              opacity={0}
            >
              {calcualtedData?.distributed_per?.toFixed(2)}%
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {calcualtedData?.distributed_amt?.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
            </Th>
          </Tr>
        </Tbody>
      </Table>
    );
  };

  const onSubmit = async (data) => {
    setIsCalculateLoading(true);

    try {
      const res = await getDistributionInvestment({ id, data });
      console.log(res?.data?.data);

      if (res?.error?.status === 401) {
        toast({
          render: () => (
            <ToastBox message={res?.error?.data?.message} status={"error"} />
          ),
        });
        setIsCalculateLoading(false);
        setIsCalcualtedData(false);
      } else if (res?.data?.statusCode === 200) {
        setCalculatedDate(res?.data?.data);
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setIsCalculateLoading(false);
        setIsCalcualtedData(true);
      }
    } catch (error) {}
  };

  const onFinalSubmit = async (data) => {
    console.log("hit");
    setIsFinalCalculateLoading(true);
    // if (!isCalcualtedData) {
    //   setIsFinalCalculateLoading(false);
    //   return toast({
    //     render: () => (
    //       <ToastBox
    //         message={"Please calculate investment first."}
    //         status="warn"
    //       />
    //     ),
    //   });
    // }

    const finalData = {
      transactionAmount: IODetails?.ioMVNAV,
    };

    try {
      const res = await updateExitToInvestor({ id, data: finalData });
      console.log(finalData);

      if (res?.error?.status === 401) {
        toast({
          render: () => (
            <ToastBox message={res?.error?.data?.message} status="error" />
          ),
        });
      } else if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        handleClose();
      }
    } catch (error) {
      console.error("An error occurred:", error);
    } finally {
      handleClose();
    }
  };

  const handleClose = () => {
    onClose();
    setIsFinalCalculateLoading(false);
    setIsCalcualtedData(false);
  };

  return (
    <Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
      <ModalOverlay />
      <ModalContent maxW={1000}>
        <ModalHeader fontSize={"md"}>Exit Transaction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          {/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
            Amount to Distribute
          </Text> */}
          <HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4} alignItems={'center'}>
            {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
            {/* <FormControl isInvalid={errors.amount} isRequired>*/}
              <Text textAlign={"right"} fontSize={"sm"}>
                Exit Amount :
              </Text> 
            <Text
              textAlign={"start"}
              bg={"green.100"}
              p={2}
              rounded={"md"}
              fontSize={"sm"}
              pt={1}
              pb={1}
              fontWeight={600}
            >
              ${" "}
              {parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
            </Text>

            {/* </FormControl> */}
          </HStack>

          {/* {calcualtedData && ( */}
          <NormalData
            emptyMessage={`We don't have any Sponers `}
            tableHeadRow={tableHeadRow}
            data={extractedArray}
            // total={<Total />}
            // isLoading={isLoading}
          />
          {/* ) } */}
        </ModalBody>
        <ModalFooter pt={0}>
          {isCalcualtedData ? (
            <>
              <Button
                bg={"hsla(139, 100%, 14%, 1)"}
                mr={3}
                color={"#fff"}
                _hover={{
                  bg: "hsl(139deg 98.99% 26.59%)",
                }}
                size={"sm"}
                rounded={"sm"}
                onClick={() => onFinalSubmit()}
                isLoading={isFinalCalculateLoading}
              >
                Save
              </Button>
              <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
                Close
              </Button>
            </>
          ) : (
            ""
          )}
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default Exit;