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,
} 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";

const ViewIOdataHeader = () => {
  const params = useParams();
  const id = params?.id;
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();
  const { IODetails } = useContext(GlobalStateContext);
  const foundObject = IODetails?.find(
    (item) => item?.id.toString() === id?.toString()
  );

  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",
  };
  return (
    <Box
      display={"flex"}
      alignItems={"center"}
      justifyContent={"start"}
      gap={14}
      bg={"#caf5d8"}
      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"}
      paddingRight={"10px"}
      borderRadius={"10px"}
      position={"relative"}
    >
      <Box h={100} w={200} p={1.5} >
        {/* <Image rounded={'md'} h={"100%"} src={foundObject?.ioName} alt={foundObject?.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"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
        IO name: <Text as={'span'} ms={2}>{foundObject?.ioName}</Text>
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          Sponsor name: <Text as={'span'} ms={2}>{foundObject?.sponserName}</Text>
        </Text>
      </Box> */}

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO Name
        </Text>
        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
          {id ? foundObject?.ioName : "---"}
        </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"}>
          {id ? foundObject?.sponserName : "---"}
        </Text>
      </Box>

      <Box display={"flex"} flexDirection={"column"} gap={2}>
        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
          IO Status
        </Text>
        <Badge
          rounded={"md"}
          pt={0.5}
          pb={0.5}
          ps={4}
          pe={4}
          textTransform={"none"}
          color={
            foundObject?.ioStatus === "Open"
              ? "#00B69B"
              : foundObject?.ioStatus === "Pending"
              ? "#6226EF"
              : "#EF3826"
          }
          colorScheme={
            foundObject?.ioStatus === "Open"
              ? "green"
              : foundObject?.ioStatus === "Pending"
              ? "purple"
              : "red"
          }
        >
          {id ? foundObject?.ioStatus : "---"}
        </Badge>
      </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"}>
          {id ? "$42012.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"}>
          {id ? "$48,000" : "---"}
        </Text>
      </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"}>
          {id ? "$1,140,500" : "---"}
        </Text>
      </Box>

      <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>
            <MenuItem onClick={onInvestmentOpen} className="border-bottom">
              Amount Invested
            </MenuItem>
            <MenuItem onClick={onFeesOpen} className="border-bottom">
              Fees & Expenses
            </MenuItem>
            <MenuItem onClick={onDistSponsorOpen} className="border-bottom">
              Distribution from Sponsors
            </MenuItem>
            <MenuItem onClick={onDistInvestorOpen} className="border-bottom">
              Distribution To investors
            </MenuItem>
            <MenuItem onClick={onUpdateNavOpen} className="border-bottom">
              Update iO NAV
            </MenuItem>
            <MenuItem  onClick={onExitOpen} className="border-bottom">Exit</MenuItem>
            <MenuItem onClick={onCancleOpen} className="border-bottom">Cancel</MenuItem>
            <MenuItem onClick={onUpdateStatusOpen}>Update iO status</MenuItem>
          </MenuList>
        </Menu>

        {/* Drawer */}
        {/* <Drawer
          isOpen={isOpen}
          placement="right"
          onClose={onClose}
          finalFocusRef={btnRef}
        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader>Transaction</DrawerHeader>

            <DrawerBody>
              <Box
                display={"grid"}
                alignContent={"left"}
                justifyItems={"start"}
              >
                <Button
                  onClick={onInvestmentOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Amount Invested
                </Button>
                <Divider />
                <Button
                  onClick={onFeesOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Fees & Expenses
                </Button>
                <Divider />
                <Button
                  onClick={onDistSponsorOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Distribution from Sponsors
                </Button>
                <Divider />
                <Button
                  onClick={onDistInvestorOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Distribution To Investors
                </Button>
                <Divider />
                <Button
                  onClick={onUpdateNavOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Update IO NAV
                </Button>
                <Divider />
                <Button
                  onClick={onUpdateStatusOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Update IO Status
                </Button>
                <Divider />
              </Box>
            </DrawerBody>

            <DrawerFooter>
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer> */}

        {/* 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
          isOpen={isUpdateStatusOpen}
          onClose={onUpdateStatusClose}
        />
      </Box>
    </Box>
  );
};

export default ViewIOdataHeader;