import {
    Avatar,
    Badge,
    Box,
    Button,
    HStack,
    Input,
    Table,
    Tag,
    Tbody,
    Text,
    Th,
    Tooltip,
    Tr,
    useDisclosure,
    useToast,
  } from "@chakra-ui/react";
  import React, { useContext, useEffect, useRef, useState } from "react";
  import { AddIcon} from "@chakra-ui/icons";
  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
  import NormalTable from "../../../../Components/DataTable/NormalTable";
  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
  import AddCashDetails from "../AddCashDetails";
import AddRejected from "./AddRejected";
import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
import { useParams } from "react-router-dom";
import ToastBox from "../../../../Components/ToastBox";
import AddCaseDetails from "./AddCaseDetails";
  
  const formatDate = (date) => new Date(date).toLocaleDateString();
  
  const Rejected = () => {
    const params = useParams()
    const id = params?.id
    const toast = useToast();
    const firstField = useRef();
    const { isOpen, onOpen, onClose } = useDisclosure();
    const { IODetails, approved, setApproved } =
      useContext(GlobalStateContext);
    const [searchTerm, setSearchTerm] = useState("");
    const [isLoading, setIsLoading] = useState(true);
    const [deleteAlert, setDeleteAlert] = useState(false);
    const [actionId, setActionId] = useState(false);
    const [mouseEntered, setMouseEntered] = useState(false);
    const [mouseEnteredId, setMouseEnteredId] = useState("");

    const [updateIOCase] = useUpdateIOCaseMutation()
  
    useEffect(() => {
      // Simulate loading
      const timer = setTimeout(() => {
        setIsLoading(false);
      }, 1500);
  
      // Cleanup the timer on component unmount
      return () => clearTimeout(timer);
    }, []);
  
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString("en-GB", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
      });
    };
  
  
    // Table filter
    const filteredData = IODetails?.ioCashStatusHistory?.Reject?.filter((item) => {
      // Filter by name (case insensitive)
      const name = item.transactionDate;
      const searchLower = searchTerm.toLowerCase();
      const nameMatches = name.toLowerCase().includes(searchLower);
      return nameMatches;
    });
  
    const tableHeadRow = [
      "Sr No.",
      "Transaction Date",
      "Transaction Type",
      "Amount",
      "Comments",
      "Update By",
      "Update On",
    ];
  
    const extractedArray = filteredData?.map((item, index) => ({
      id: item?.id,
      "Sr No.": (
        <Text
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {index + 1}.
        </Text>
      ),
      "Transaction Date": (
        <Text
          as={"span"}
          color={"gray.600"}
          fontWeight={"500"}
        >
          {formatDate(item?.transactionDate)}
        </Text>
      ),
      "Transaction Type": (
        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
          {item?.transactionType}
        </Text>
      ),
      "Amount": (
        <Text
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          <Badge ms={1} colorScheme="green" me={1}>
                $
              </Badge>
              {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}
        </Text>
      ),
      "Comments": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {item?.comments}
        </Text>
      ),
      "Update By": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
          display={"flex"}
          alignItems={"center"}
        >
          {/* <Avatar
           mr={2}
            size="sm"
            name={item.creator?.firstName}
            src={item.creator?.profilePhoto}
          /> */}
          {item?.modifier?.firstName}
        </Text>
      ),
      "Update On": (
        <Text
          w={"100px"}
          as={"span"}
          color={"gray.800"}
          fontWeight={"500"}
        >
          {formatDate(item.updatedAt)}
        </Text>
      ),
    }));
  
    const handleDelete = () => {
      const updatedSponsors = sponser.filter(
        (sponsor) => sponsor.id !== actionId
      );
  
      setTimeout(() => {
        setCaseDetails(updatedSponsors);
        setDeleteAlert(false);
        setIsLoading(false);
      }, 100);
      setIsLoading(true);
    };
  
    const Total = () => {
      return (
        <Table size="sm">
          <Tbody backgroundColor="gray.50">
            <Tr>
              <Th
                textAlign={"center"}
                p={3}
                width="130px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              >
                Balance in IO Cash
              </Th>
              <Th
                textAlign={"center"}
                p={3}
                width="150px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              >
                {" "}
              </Th>
              <Th
                textAlign={"center"}
                p={3}
                width="150px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              >
                {}
              </Th>
              <Th
                textAlign={"center"}
                p={3}
                width="100px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              >
                {"48,000.00"}
              </Th>
              <Th
                textAlign={"center"}
                p={3}
                width="100px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              >
                {" "}
              </Th>
              <Th
                textAlign={"center"}
                p={3}
                width="100px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              ></Th>
              <Th
                textAlign={"center"}
                p={3}
                width="100px"
                color={"#004118"}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
              ></Th>
            </Tr>
          </Tbody>
        </Table>
      );
    };

    
  const handleAdd = async () =>{
    try {
       const res = await updateIOCase(id)
       if (res?.data) {
        //  toast({
        //    render: () => (
        //      <ToastBox status={"success"} message={res?.data?.message} />
        //    ),
        //  });
         setIsLoading(false);
         onOpen()
 
       } else if (res?.error) {
         toast({
           render: () => (
             <ToastBox status={"error"} message={res?.error?.data?.message} />
           ),
         });
         setIsLoading(false);
       }
    } catch (error) {    
    }
  }
  
    return (
      <Box {...OPACITY_ON_LOAD} pb={0}>
        <Box bg="white.500">
          <HStack
            display={"flex"}
            justifyContent={"space-between"}
            pb={3}
            spacing="24px"
          >
            <Input
              type="search"
              width={300}
              placeholder="Search..."
              size="sm"
              rounded="sm"
              focusBorderColor="green.500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
  
            {/* <HStack display={"flex"} alignItems={"center"}>
            {IODetails?.isInvestedAmount ? (
              localStorage?.getItem('role') ==="Maker"&& <Button
                onClick={handleAdd}
                leftIcon={<AddIcon />}
                colorScheme="forestGreen"
                size={"sm"}
                rounded={"sm"}
                fontSize={"xs"}
              >
                Add
              </Button>
            ) : null}
            </HStack> */}
          </HStack>
        </Box>
  
        <NormalTable
          emptyMessage={`We don't have any Sponers`}
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          isLoading={isLoading}
          viewActionId={actionId}
          setViewActionId={setActionId}
          // total={<Total/>}
          setMouseEnteredId={setMouseEnteredId}
          setMouseEntered={setMouseEntered}
        />
  
        <CustomAlertDialog
          onClose={() => setDeleteAlert(false)}
          isOpen={deleteAlert}
          message={"Are you sure you want to delete sponers?"}
          alertHandler={handleDelete}
          isLoading={isLoading}
        />
  
        <AddCaseDetails
          isOpen={isOpen}
          onClose={onClose}
          firstField={firstField}
        />
      </Box>
    );
  };
  
  export default Rejected;