import React, { useContext } from 'react'
import {
  Box,
  Button,
  Flex,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Portal,
  Text,
} from '@chakra-ui/react'
import { ChevronDownIcon } from '@chakra-ui/icons'
import { initialColoring } from '../../config'

export interface GraphColorSelectProps {
  coloring: typeof initialColoring
  setColoring: any
}

export const GraphColorSelect = (props: GraphColorSelectProps) => {
  type Theme = { [key: string]: string }
  const { coloring, setColoring } = props
  return (
    <Flex alignItems="center" justifyContent="space-between" pl={7} pr={2}>
      <Text>Graph coloring</Text>
      <Menu isLazy placement="right">
        <MenuButton
          as={Button}
          size="sm"
          colorScheme=""
          color="black"
          rightIcon={<ChevronDownIcon />}
        >
          {coloring.method === 'degree' ? 'Links' : 'Communities'}
        </MenuButton>
        <Portal>
          <MenuList minW={10} zIndex="popover" bgColor="gray.200">
            <MenuItem
              onClick={() =>
                setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'degree' }))
              }
              justifyContent="space-between"
              alignItems="center"
              display="flex"
            >
              Number of links
            </MenuItem>
            <MenuItem
              onClick={() =>
                setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'community' }))
              }
              justifyContent="space-between"
              alignItems="center"
              display="flex"
            >
              Communities
            </MenuItem>
          </MenuList>
        </Portal>
      </Menu>
    </Flex>
  )
}