import React, { useRef } from 'react'
import {
  Box,
  Menu,
  MenuItem,
  MenuList,
  MenuGroup,
  MenuItemOption,
  MenuOptionGroup,
  Heading,
  MenuDivider,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
  PopoverTrigger,
  PopoverContent,
  Popover,
  Flex,
  PopoverBody,
  PopoverCloseButton,
  PopoverArrow,
  PopoverHeader,
  PopoverFooter,
  Portal,
  Text,
  VStack,
} from '@chakra-ui/react'
import {
  DeleteIcon,
  EditIcon,
  CopyIcon,
  AddIcon,
  ViewIcon,
  ExternalLinkIcon,
  ChevronRightIcon,
  PlusSquareIcon,
} from '@chakra-ui/icons'

import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
import { deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from '../util/webSocketFunctions'
import { BiNetworkChart } from 'react-icons/bi'

export default interface ContextMenuProps {
  background: Boolean
  target: OrgRoamNode | null
  nodeType?: string
  coordinates: { [direction: string]: number | undefined }
  handleLocal: (node: OrgRoamNode, add: string) => void
  menuClose: () => void
  scope: { nodeIds: string[] }
  webSocket: any
  setPreviewNode: any
}

export const ContextMenu = (props: ContextMenuProps) => {
  const {
    background,
    target,
    nodeType,
    coordinates,
    handleLocal,
    menuClose,
    scope,
    webSocket,
    setPreviewNode,
  } = props
  const { isOpen, onOpen, onClose } = useDisclosure()
  const copyRef = useRef<any>()
  return (
    <>
      <Menu defaultIsOpen closeOnBlur={false} onClose={() => menuClose()}>
        <MenuList
          zIndex="overlay"
          bgColor="white"
          color="black"
          borderColor="gray.500"
          maxWidth="xs"
          position="absolute"
          left={coordinates.left}
          top={coordinates.top}
          right={coordinates.right}
          bottom={coordinates.bottom}
          fontSize="xs"
        >
          {target && (
            <>
              <Heading size="xs" isTruncated px={3} py={1}>
                {target.title}
              </Heading>
              <MenuDivider borderColor="gray.500" />
            </>
          )}
          {scope.nodeIds.length !== 0 && (
            <>
              <MenuItem onClick={() => handleLocal(target!, 'add')} icon={<PlusSquareIcon />}>
                Expand local graph at node
              </MenuItem>
              <MenuItem onClick={() => handleLocal(target!, 'replace')} icon={<BiNetworkChart />}>
                Open local graph for this node
              </MenuItem>
            </>
          )}
          {!target?.properties?.FILELESS ? (
            <MenuItem
              icon={<EditIcon />}
              onClick={() => openNodeInEmacs(target as OrgRoamNode, webSocket)}
            >
              Open in Emacs
            </MenuItem>
          ) : (
            <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(target, webSocket)}>
              Create node
            </MenuItem>
          )}
          {target?.properties?.ROAM_REFS && (
            <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
          )}
          {scope.nodeIds.length === 0 && (
            <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(target!, 'replace')}>
              Open local graph
            </MenuItem>
          )}
          {/* Doesn't work at the moment
                            <MenuItem closeOnSelect={false} closeOnBlur={false}>
                            <Box _hover={{ bg: 'gray.200' }} width="100%">
                                <Popover
                                    initialFocusRef={copyRef}
                                    trigger="hover"
                                    placement="right-start"
                                    gutter={0}
                                >
                                    <PopoverTrigger>
                                        <MenuItem closeOnSelect={false} icon={<CopyIcon />}>
                                            <Flex justifyContent="space-between" alignItems="center">
                                                Copy...
                                                <ChevronRightIcon />
                                            </Flex>
                                        </MenuItem>
                                    </PopoverTrigger>
                                    <PopoverContent width={100}>
                                        <Menu defaultIsOpen closeOnBlur={false} closeOnSelect={false}>
                                            <MenuList bg="alt.100" zIndex="popover">
                                                <MenuItem ref={copyRef}>ID</MenuItem>
                                                <MenuItem>Title</MenuItem>
                                                <MenuItem>File path</MenuItem>
                                            </MenuList>
                                        </Menu>
                                    </PopoverContent>
                                </Popover>
                            </Box>
                        </MenuItem> */}

          <MenuItem
            icon={<ViewIcon />}
            onClick={() => {
              setPreviewNode(target)
            }}
          >
            Preview
          </MenuItem>
          {target?.level === 0 && (
            <MenuItem
              closeOnSelect={false}
              icon={<DeleteIcon color="red.500" />}
              color="red.500"
              onClick={onOpen}
            >
              Permenantly delete note
            </MenuItem>
          )}
        </MenuList>
      </Menu>
      <Modal isCentered isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent zIndex="popover">
          <ModalHeader>Delete node?</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <VStack spacing={4} display="flex" alignItems="flex-start">
              <Text>This will permanently delete your note:</Text>
              <Text fontWeight="bold">{target?.title}</Text>
              {target?.level !== 0 && (
                <Text>
                  This will only delete the from this heading until but not including the next node.
                  Your parent file and all other nodes will not be deleted.
                </Text>
              )}
              <Text>Are you sure you want to do continue?</Text>
            </VStack>
          </ModalBody>
          <ModalFooter>
            <Button
              mr={3}
              onClick={() => {
                console.log('closing')
                onClose()
                menuClose()
              }}
            >
              Cancel
            </Button>
            <Button
              variant="link"
              colorScheme="red"
              ml={3}
              onClick={() => {
                console.log('aaaaa')
                deleteNodeInEmacs(target!, webSocket)
                onClose()
                menuClose()
              }}
            >
              Delete node
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

/* <Box>
 *     <Popover>
 *         <PopoverTrigger>
 *                 Permenantly delete node
 *             </MenuItem>
 *         </PopoverTrigger>
 *         <PopoverContent borderColor="red.500" _focus={{}}>
 *             <PopoverHeader fontWeight="semibold">Delete Node?</PopoverHeader>
 *             <PopoverArrow />
 *             <PopoverCloseButton onClick={onClose} />
 *             <PopoverBody>
 *                 This will permanently delete your node! Are you sure you want to do this?
 *             </PopoverBody>
 *             <PopoverFooter>
 *                 <Flex justifyContent="space-between" py={1}>
 *                     <Button colorScheme="gray" bg="gray.800" color="alt.100" width={30} onClick={onClose}>
 *                         Nah
 *                     </Button>
 *                     <Button colorScheme="red" variant="link" onClick={onClose}>
 *                         Delete node
 *                     </Button>
 *                 </Flex>
 *             </PopoverFooter>
 *         </PopoverContent>
 *     </Popover>
 * </Box> */