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 { useState } from "react";
import { AddIcon } from "@chakra-ui/icons";
import { useGetDistributionInvestorMutation } 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";

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

const DistributionInvestor = ({ isOpen, onClose }) => {
  const params = useParams();
  const toast = useToast();
  const id = params?.id;
  const [ isCalculateLoading, setIsCalculateLoading ] = useState(false)
  const [ calcualtedData, setCalculatedDate ] = useState(null)

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

  const [getDistributionInvestment] = useGetDistributionInvestorMutation();

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

  // 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",
    "%",
    "($)",
  ];


  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}
          </Text>
        </Box>
      ),
      "%": (
        <Box minW={19} isTruncated={true}>
          <Text
            textAlign={"right"}
            as={"span"}
            color={"teal.900"}
            fontWeight={"500"}
          >
            {item?.distribution_per} %
          </Text>
        </Box>
      ),
      "($)": (
        <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?.toFixed(2)?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </Th>
            <Th
              textAlign={"left"}
              p={3}
              width="90px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {calcualtedData?.distributed_per?.toFixed(2)}%
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
            {calcualtedData?.distributed_amt?.toFixed(2)?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </Th>
          </Tr>
        </Tbody>
      </Table>
    );
  };

  const onSubmit = async (data) => {
    console.log(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)
          } else if(res?.data?.statusCode === 200){
            setCalculatedDate(res?.data?.data)
            toast({
              render: () => (
                <ToastBox message={res?.data?.message} />
              ),
            })
            setIsCalculateLoading(false)

          }
    
        } catch (error) {
    
        }
  };

  console.log(errors);

  return (
    <Modal size={"xl"} isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent maxW={1000}>
        <ModalHeader fontSize={"md"}>
          Distribution To Investor 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}>
            {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
            <FormControl isInvalid={errors.amount}>
              <FormLabel textAlign={'right'} fontSize={"sm"} > Amount to Distribute</FormLabel>
              <Box display={"flex"} justifyContent={'end'} alignItems={"end"} gap={0}>
                <Controller
                  name="amount"
                  control={control}
                  render={({ field }) => (
                    <CurrencyInput
                  
                    rounded={0}
                    w={'18%'}
                      {...field}
                      fontSize={"sm"}
                      type="number"
                      size={"sm"}
                      textAlign={"right"}
                    />
                  )}
                />
                <Button
                  leftIcon={<IoCalculator />}
                  size={"sm"}
                  rounded={0}
                  colorScheme="forestGreen"
                  type="submit"
                  isLoading={isCalculateLoading}
                >
                  Calculate
                </Button>
              </Box>
              <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                {errors.amount?.message}
              </FormErrorMessage>
            </FormControl>
          </HStack>

          {calcualtedData ? <NormalData
            emptyMessage={`We don't have any Sponers `}
            tableHeadRow={tableHeadRow}
            data={extractedArray}
            total={<Total />}
            // isLoading={isLoading}
          /> : <Alert status='info' fontSize={'sm'} rounded={'sm'}>
          <AlertIcon />
          Please enter amount to calcutale Distribution!
        </Alert>}
        </ModalBody>
        <ModalFooter pt={0}>
          <Button
            bg={"hsla(139, 100%, 14%, 1)"}
            mr={3}
            color={"#fff"}
            _hover={{
              bg: "hsl(139deg 98.99% 26.59%)",
            }}
            size={"sm"}
            rounded={"sm"}
          >
            Save
          </Button>
          <Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default DistributionInvestor;