import {
  Portal,
  Popover,
  PopoverTrigger,
  PopoverBody,
  PopoverContent,
  Box,
  Text,
  Flex,
  Spacer,
  Image,
  HStack,
} from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Option, ContextMenuProps } from "../../../interfaces/context";
import { fetchNui } from "../../../utils/fetchNui";

const openMenu = (id: string | undefined) => {
  fetchNui<ContextMenuProps>("openContext", id);
};

const clickContext = (id: string) => {
  fetchNui("clickContext", id);
};

const Item: React.FC<{
  option: [string, Option];
}> = ({ option }) => {
  return (
    <>
      <Popover
        placement="right-start"
        trigger="hover"
        eventListeners={{ scroll: true }}
        isLazy
      >
        <PopoverTrigger>
          <Box
            bg="gray.800"
            borderRadius="md"
            h="fit-content"
            w="100%"
            p={2}
            mb={1}
            fontFamily="Poppins"
            fontSize="md"
            transition="300ms"
            _hover={{ bg: "gray.700" }}
          >
            <Flex
              w="100%"
              alignItems="center"
              onClick={() =>
                option[1].menu
                  ? openMenu(option[1].menu)
                  : clickContext(option[0])
              }
            >
              {option[1]?.icon && (
                <FontAwesomeIcon
                  fixedWidth
                  icon={option[1].icon}
                  fontSize={20}
                  style={{
                    marginRight: 10,
                    justifySelf: "center",
                    color: option[1].iconColor,
                  }}
                />
              )}
              <Box>
                <Box paddingBottom={option[1].description ? 1 : 0}>
                  <Text w="100%" fontWeight="medium">
                    {option[1].title ? option[1].title : option[0]}
                  </Text>
                </Box>
                {option[1].description && (
                  <Box paddingBottom={1}>
                    <Text>{option[1].description}</Text>
                  </Box>
                )}
              </Box>
              {(option[1].menu || option[1].arrow) && (
                <>
                  <Spacer />
                  <Box
                    alignSelf="center"
                    justifySelf="center"
                    mr={4}
                    fontSize="xl"
                  >
                    <FontAwesomeIcon icon="chevron-right" />
                  </Box>
                </>
              )}
            </Flex>
            <Portal>
              {(option[1].metadata || option[1].image) && (
                <PopoverContent
                  fontFamily="Poppins"
                  bg="gray.800"
                  outline="none"
                  border="none"
                  w="fit-content"
                  maxW="2xs"
                >
                  <PopoverBody>
                    <>
                      {option[1].image && <Image src={option[1].image} />}
                      {Array.isArray(option[1].metadata) ? (
                        option[1].metadata.map(
                          (
                            metadata: string | { label: string; value: any },
                            index: number
                          ) => (
                            <Text key={`context-metadata-${index}`}>
                              {typeof metadata === "string"
                                ? `${metadata}`
                                : `${metadata.label}: ${metadata.value}`}
                            </Text>
                          )
                        )
                      ) : (
                        <>
                          {typeof option[1].metadata === "object" &&
                            Object.entries(option[1].metadata).map(
                              (metadata: { [key: string]: any }, index) => (
                                <Text key={`context-metadata-${index}`}>
                                  {metadata[0]}: {metadata[1]}
                                </Text>
                              )
                            )}
                        </>
                      )}
                    </>
                  </PopoverBody>
                </PopoverContent>
              )}
            </Portal>
          </Box>
        </PopoverTrigger>
      </Popover>
    </>
  );
};

export default Item;