import { Box, Button, HStack, Icon, Input, InputGroup, InputLeftElement, Tag, Text, VStack } from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { useContext, useEffect, useState } from "react";
import NormalTable from "../../Components/DataTable/NormalTable";
import { MdOutlineRamenDining } from "react-icons/md";
import { RiDeleteBin5Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { AddIcon, SearchIcon } from "@chakra-ui/icons";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
import { GoDotFill } from "react-icons/go";

const RegisteredCorporate = () => {
  const { corpData } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedRadio, setSelectedRadio] = useState("");

  // Simulate loading effect
  useEffect(() => {
    setIsLoading(true);
    const timer = setTimeout(() => setIsLoading(false), 500);
    return () => clearTimeout(timer);
  }, []);

  console.log(corpData);

  // Table headers
  const tableHeadRow = [
    "Select",
    "Corp Id",
    "Company Name",
    "Date Of Onboarding",
    "Email Address",
    "Industry",
    "Type",
    "Subscription",
    "Status"

  ];
  // Extracted data for table
  const extractedArray = corpData?.map((item, index) => ({
    "Corp Id": (
      <Text
        as={"span"}
        display={"flex"}
        fontSize={"xs"}
        gap={2}
        alignItems={"center"}
      >
        {item.CorpId}
      </Text>
    ),
    "Company Name":
    (<Text
      as={"span"}
      display={"flex"}
      fontSize={"xs"}
      gap={2}
      alignItems={"center"}
    >
      {item.CompanyName}
    </Text>),
    "Date Of Onboarding": (
      <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
        {item.DateOfOnbaording}
      </Text>
    ),
    // "Email Address": (
    //   <HStack flexWrap={"wrap"}>
    //     <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
    //       <Text
    //         bgGradient="linear(to-l, #3725EA, #5E0FCD)"
    //         bgClip="text"
    //         fontSize={"xs"}
    //         as={"span"}
    //         fontWeight={600}
    //       >
    //         {item.EmailAddress}
    //       </Text>
    //     </Tag>
    //     <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
    //       <Text
    //         bgGradient="linear(to-l, #3725EA, #5E0FCD)"
    //         bgClip="text"
    //         fontSize={"xs"}
    //         as={"span"}
    //         fontWeight={600}
    //       >
    //         {item.walletType}
    //       </Text>
    //     </Tag>
    //     <Tag bg={index % 2 === 0 ? "#F0E6FF" : "#fff"} size="sm">
    //       <Text
    //         bgGradient="linear(to-l, #3725EA, #5E0FCD)"
    //         bgClip="text"
    //         fontSize={"xs"}
    //         as={"span"}
    //         fontWeight={600}
    //       >
    //         {item.walletType}
    //       </Text>
    //     </Tag>
    //   </HStack>
    // ),
    "Email Address": (
        <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
            {item.EmailAddress}
          </Text>
    ),

    "Industry": (
        <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
          {item.Industry}
        </Text>
    ),

    "Type": (
        <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
          {item.Type}
        </Text>
    ),

    "Subscription": (
        <Text fontSize={"xs"} as={"span"} colorScheme={"#363636"}>
          {item.Subscription}
        </Text>
    ),

    "Status": (
<Tag bg={index % 2 === 0 ? "green.100" : "#fff"} size="sm">
    <GoDotFill color="green"/> <Text
    ms={1}
        bgGradient="linear(to-l, green.700, green.600)"
        bgClip="text"
        fontSize={"xs"}
        as={"span"}
        fontWeight={600}
      >
        {item.Status}
      </Text>
    </Tag>
    ),
    
  }));

  return (
    <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
      <MiniHeader backButton={true} title={"Manage Registered Corporates"} />

      <VStack shadow={'md'} rounded={'md'} gap={3} py={3} bg={'#fff'}>
        <HStack px={3} w={'100%'} justifyContent={'space-between'}>
            <Text as={'span'} fontWeight={500} fontSize={'sm'}>Corporates</Text>
            <HStack>
            <InputGroup width={350} size="sm" ml={5}>
          <InputLeftElement pointerEvents="none">
            <SearchIcon color="gray.500" />
          </InputLeftElement>
          <Input
            type="search"
            placeholder="Search..."
            rounded="md"
            bg={'gray.100'}
            border={'none'}
            // value={searchTerm}
            // onChange={(e) => setSearchTerm(e.target.value)}
          />
        </InputGroup>

        <PrimaryButton title={"Add New"}  size={'sm'} leftIcon={<AddIcon fontSize={'xs'}/>}/>
            </HStack>
        </HStack>
      <NormalTable
        emptyMessage={`We don't have any Sponsors `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={isLoading}
        radio={true}
        showRadioButton={true}
        selectedRadio={selectedRadio}
        setSelectedRadio={setSelectedRadio}
      />
      </VStack>
    </Box>
  );
};

export default RegisteredCorporate;
