import {
  Button,
  Divider,
  Image,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Portal,
  Text,
  useDisclosure,
  MenuItemOption,
  MenuGroup,
  MenuOptionGroup,
  MenuDivider,
  Badge,
  Box,
  Icon,
  HStack,
} from "@chakra-ui/react";
import header from "../../../assets/IOheader.png";
import { HiDotsVertical } from "react-icons/hi";
import { Link, useParams } from "react-router-dom";
import AmountInvested from "./HeaderModal/AmountInvested";
import FeesExpenses from "./HeaderModal/FeesExpenses";
import DistributionSponsor from "./HeaderModal/DistributionSponsor";
import DistributionInvestor from "./HeaderModal/DistributionInvestor";
import UpdateIONav from "./HeaderModal/UpdateIONav";
import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
import { useContext, useRef } from "react";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import Exit from "./HeaderModal/Exit";
import Cancle from "./HeaderModal/Cancle";
import { AddIcon } from "@chakra-ui/icons";
import { GrGallery } from "react-icons/gr";
import Loader01 from "../../../Components/Loaders/Loader01";
import { formatCurrency } from "../../../Components/CurrencyInput";
import { removeTrailingZeros } from "../../../Constants/Constants";

const ViewIOdataHeader = ({data, isLoading}) => {
  const params = useParams();
  const id = params?.id;
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();
  const { IODetails, isIOloading } = useContext(GlobalStateContext);
  
  const {
    isOpen: isInvestmentOpen,
    onOpen: onInvestmentOpen,
    onClose: onInvestmentClose,
  } = useDisclosure();
  const {
    isOpen: isFeesOpen,
    onOpen: onFeesOpen,
    onClose: onFeesClose,
  } = useDisclosure();
  const {
    isOpen: isDistSponsorOpen,
    onOpen: onDistSponsorOpen,
    onClose: onDistSponsorClose,
  } = useDisclosure();
  const {
    isOpen: isDistInvestorOpen,
    onOpen: onDistInvestorOpen,
    onClose: onDistInvestorClose,
  } = useDisclosure();
  const {
    isOpen: isUpdateNavOpen,
    onOpen: onUpdateNavOpen,
    onClose: onUpdateNavClose,
  } = useDisclosure();
  const {
    isOpen: isUpdateStatusOpen,
    onOpen: onUpdateStatusOpen,
    onClose: onUpdateStatusClose,
  } = useDisclosure();
  const {
    isOpen: isExitOpen,
    onOpen: onExitOpen,
    onClose: onExitClose,
  } = useDisclosure();
  const {
    isOpen: isCancleOpen,
    onOpen: onCancleOpen,
    onClose: onCancleClose,
  } = useDisclosure();
  const bg = {
    bg: "#fff",
  };
  const hover = {
    textDecoration: "underline",
    background: "#fff",
  };
  const style = {
    fontSize: "0.875rem",
    fontWeight: "400",
  };



  const menu = [
    {
      id:1,
      title:"Amount Invested",
      onClickFunction: onInvestmentOpen
    },
    // {
    //   id:2,
    //   title:"Fees & Expenses",
    //   onClickFunction:onFeesOpen
    // },
    // {
    //   id:3,
    //   title:"Distribution From Sponsors",
    //   onClickFunction:onDistSponsorOpen
    // },
    {
      id:6,
      title:"Distribution To Investors",
      onClickFunction:onDistInvestorOpen
    },
    {
      id:5,
      title:"Update IO NAV",
      onClickFunction:onUpdateNavOpen
    },
    {
      id:8,
      title:"Exit",
      onClickFunction:onExitOpen
    },
    {
      id:9,
      title:"Cancel",
      onClickFunction:onCancleOpen
    },
    {
      id:10,
      title:"Update IO Status",
      onClickFunction:onUpdateStatusOpen
    },
  ]

  // console.log(IODetails?.mainTranscation);


// Extract titles from apiTransaction
const apiTransactionTitles = IODetails?.mainTranscation?.map(transaction => transaction.id);
// Filter menu items
const filteredMenu = menu?.filter(item => apiTransactionTitles?.includes(item.id));






  return (
    IODetails?.investmentNameEnglish ?
    <Box
      display={"flex"}
      alignItems={"center"}
      justifyContent={"space-between"}
      gap={8}
      bg={
        IODetails?.ioStatus?.statusAdmin === "Draft"
          ? "#EDF2F7"
          : IODetails?.ioStatus?.statusAdmin === "Processing"
          ? "#FEFBBF"
          : IODetails?.ioStatus?.statusAdmin === "Open"
          ? "#BEE2F8"
          : IODetails?.ioStatus?.statusAdmin === "Closed"
          ? "#C6F6D5"
          : IODetails?.ioStatus?.statusAdmin === "Exited"
          ? "red.500"
          : IODetails?.ioStatus?.statusAdmin === "Canclled"
          ? "orange.500"
          : IODetails?.ioStatus?.statusAdmin === "DeActivate"
          ? "#E9D8FD"
          : null
      }
      rounded={"md"}
      // bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
      // bgGradient='linear(to-r, #ffd54f, #caf5d8)'
      // bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
      boxShadow={"md"}
      position={"relative"}
    >



      <HStack gap={8}>
      <Box h={100} w={200} p={1.5}>
        {/* <Image rounded={'md'} h={"100%"} src={ " https://tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
        {IODetails?.artifactsImage?.[0]?.artifactPathName ? (
          <Image
            rounded={"md"}
            h={"100%"}
            w={"100%"}
            objectFit={"cover"}
            src={
              " https://tanami.betadelivery.com/" +
              IODetails?.artifactsImage?.[0]?.artifactPathName
            }
            alt={IODetails?.ioName}
          />
        ) : (
          <Box
            w={"100%"}
            h={"100%"}
            display={"flex"}
            justifyContent={"center"}
            alignItems={"center"}
            bg={"#fff"}
            rounded={"md"}
          >
            <Icon color={"gray.700"} as={GrGallery} />
          </Box>
        )}
      </Box>
  
      <Box display={"flex"} w={"auto"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO Name
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {IODetails?.investmentNameEnglish
            ? IODetails?.investmentNameEnglish
            : "---"}
        </Text>
      </Box>

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          Sponsorer Name
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {IODetails?.sponsor?.sponsorName
            ? IODetails?.sponsor?.sponsorName
            : "---"}
        </Text>
      </Box>
      </HStack>


      <HStack gap={8} me={20}>

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} textAlign={'center'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO Status
        </Text>
        <Badge
          rounded={"full"}
          pt={0}
          pb={0.5}
          ps={4}
          pe={4}
          textTransform={"none"}
          
          // variant={"solid"}
          colorScheme={
            IODetails?.ioStatus?.statusAdmin === "Draft"
              ? "gray"
              : IODetails?.ioStatus?.statusAdmin === "Processing"
              ? "yellow"
              : IODetails?.ioStatus?.statusAdmin === "Open"
              ? "blue"
              : IODetails?.ioStatus?.statusAdmin === "Closed"
              ? "green"
              : IODetails?.ioStatus?.statusAdmin === "Exited"
              ? "red"
              : IODetails?.ioStatus?.statusAdmin === "Canclled"
              ? "orange"
              : "purple"
          }
        >
          {IODetails?.ioStatus?.statusAdmin
            ? IODetails?.ioStatus?.statusAdmin
            : "---"}
        </Badge>
      </Box>

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO NAV
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"}
        </Text>
      </Box>

      <Box display={"flex"} flexDirection={"column"} gap={2}> 
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO cash
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"}
        </Text>
      </Box>

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO MV NAV
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"}
        </Text>
      </Box>

      </HStack>

      <Box
        position={"absolute"}
        right={3}
        top={2}
        display={"flex"}
        alignItems={"start"}
        height={"95px"}
      >
        <Menu>
          <MenuButton
            className="link p-1 rounded-1 "
            bg={"#fff"}
            _hover={{ backgroundColor: "#fff !important" }}
            onClick={onOpen}
            ref={btnRef}
          >
            <HiDotsVertical className="rubix-text-dark fs-6" />
          </MenuButton>
          <MenuList fontSize={"sm"}>
            <MenuItem
              _hover={{
                bg: "#fff",
              }}
              as={"span"}
              fontWeight={600}
              className="border-bottom"
            >
              Tansaction
            </MenuItem>

            {filteredMenu?.map(({id, title, onClickFunction})=><MenuItem key={id} onClick={onClickFunction} className="border-bottom">
              {title}
            </MenuItem>)}
            
            
          </MenuList>
        </Menu>

       

        {/* Modals */}
        <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
        <FeesExpenses isOpen={isFeesOpen} onClose={onFeesClose} />
        <Exit isOpen={isExitOpen} onClose={onExitClose} />
        <Cancle isOpen={isCancleOpen} onClose={onCancleClose} />
        <DistributionSponsor
          isOpen={isDistSponsorOpen}
          onClose={onDistSponsorClose}
        />
        <DistributionInvestor
          isOpen={isDistInvestorOpen}
          onClose={onDistInvestorClose}
        />
        <UpdateIONav isOpen={isUpdateNavOpen} onClose={onUpdateNavClose} />
        <UpdateIOStatus
          status={IODetails?.nextStatus}
          isOpen={isUpdateStatusOpen}
          onClose={onUpdateStatusClose}
        />
      </Box>

    </Box>:
    
    <Box
      display={"flex"}
      alignItems={"center"}
      justifyContent={"center"}
      rounded={"md"}
      height={100}
      bg={"#fff"}
      // bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
      // bgGradient='linear(to-r, #ffd54f, #caf5d8)'
      // bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
      boxShadow={"md"}
    > <Loader01 /></Box>
  );
};

export default ViewIOdataHeader;