import {
  Box,
  Button,
  Divider,
  HStack,
  Icon,
  Tag,
  TagLabel,
  Text,
  VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { FaRegEye } from "react-icons/fa";
import { PiReceipt } from "react-icons/pi";

const Report = () => {
  const { reportsHistory } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Set isLoading to true
    setIsLoading(true);

    // Simulate a 3-second delay
    const timer = setTimeout(() => {
      setIsLoading(false); // Set isLoading to false after 3 seconds
    }, 500);

    // Cleanup the timer when the component unmounts or when the useEffect re-runs
    return () => clearTimeout(timer);
  }, []); // Empty dependency array means this effect runs once after the component mounts

  // ===============================[ Table Header ]
  const tableHeadRow = [
    "Name",
    "Last Update",
    "Report type",
    "Total Expense",
    "Status",
    "Actions",
  ];

  // const extractedArray = reportsHistory.map((item)=>({ }))

  const extractedArray = reportsHistory.map((item, index) => ({
    Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
    "Last Update": 
      item?.lastUpdated,
    "Report type": item?.reportType,
    "Total Expense": item?.totalExpense,
    Status: (
      <Tag
        my={1}
        size={"sm"}
        borderRadius="full"
        colorScheme={
          item?.status === "Approved"
            ? "green"
            : item?.status === "Fully Reimbursed"
            ? "purple"
            : item?.status === "Disapproved"
            ? "red"
            : item?.status === "Saved"
            ? "yellow"
            : item?.status === "Partially Reimbursed"
            ? "orange"
            : "gray" // default color scheme if status doesn't match any condition
        }
        border={`1px solid ${
          item?.status === "Approved"
            ? "green"
            : item?.status === "Fully Reimbursed"
            ? "purple"
            : item?.status === "Disapproved"
            ? "red"
            : item?.status === "Saved"
            ? "orange"
            : item?.status === "Partially Reimbursed"
            ? "orange"
            : "gray" // default border color if status doesn't match any condition
        }`}
        p={1}
        px={3}
      >
        <TagLabel>{item?.status}</TagLabel>
      </Tag>
    ),
    Actions: (
      <Box
        display={"flex"}
        gap={1}
        alignItems={"center"}
        justifyContent={"center"}
      >
        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
          <FaRegEye fontSize={"18px"} />
        </Button>
        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
          <AiOutlineEdit fontSize={"19px"} />
        </Button>
        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
          <RiDeleteBin5Line fontSize={"18px"} />
        </Button>
      </Box>
    ),
  }));

  return (
    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
      <MiniHeader
        title={"Reports History"}
        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
        backButton={true}
      />

      <Box
        rounded={"xl"}
        py={3}
        // pb={0}
        display={"flex"}
        flexDirection={"column"}
        bg={"#fff"}
        shadow={"md"}
        minH={"100%"}
      >
        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
          <Text fontSize={"lg"} fontWeight={600}>
            Reports
          </Text>
          <HStack w={"100%"} justifyContent={"space-between"}>
            <Button
              fontWeight={500}
              size={"sm"}
              leftIcon={<CalendarIcon color={"purple.800"} />}
              colorScheme="gray"
              color={"gray.700"}
              variant="outline"
              fontSize={"xs"}
            >
              Select Date Range
            </Button>

            <Button
              _hover={{
                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
                opacity: 0.8,
              }}
              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
              fontSize={"xs"}
              px={8}
              fontWeight={500}
              size={"sm"}
              color={"#fff"}
              variant="outline"
              transition={"0.5s all"}
              _active={{
                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
                opacity: 1,
              }}
            >
              Add to Report
            </Button>
          </HStack>
        </VStack>
        <Divider />
        <NormalTable
          emptyMessage={`We don't have any Sponers `}
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          isLoading={isLoading}
        />
      </Box>
    </Box>
  );
};

export default Report;
