import {
  Text,
  Accordion,
  AccordionButton,
  AccordionItem,
  Flex,
  VStack,
  AccordionIcon,
  AccordionPanel,
  MenuButton,
  Menu,
  Button,
  Box,
  Portal,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'
import React, { useCallback } from 'react'
import { HighlightingPanel } from './HighlightingPanel'
import { ColorsPanel } from './ColorsPanel'
import { initialColoring, initialVisuals } from '../config'
import { NodesNLinksPanel } from './NodesNLinksPanel'
import { LabelsPanel } from './LabelsPanel'
import { CitationsPanel } from './CitationsPanel'
import { ColorMenu } from './ColorMenu'
import { ThemeSelect } from './ThemeSelect'
import { GraphColorSelect } from './GraphColorSelect'

export interface VisualsPanelProps {
  visuals: typeof initialVisuals
  setVisuals: any
  highlightColor: string
  setHighlightColor: any
  threeDim: boolean
  coloring: typeof initialColoring
  setColoring: any
}

export const VisualsPanel = (props: VisualsPanelProps) => {
  const {
    coloring,
    setColoring,
    visuals,
    setVisuals,
    highlightColor,
    setHighlightColor,
    threeDim,
  } = props
  const setVisualsCallback = useCallback((val) => setVisuals(val), [])
  return (
    <VStack justifyContent="flex-start" align="stretch">
      <ThemeSelect />
      <GraphColorSelect {...{ coloring, setColoring }} />
      <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}>
        <AccordionItem>
          <AccordionButton>
            <Flex justifyContent="space-between" w="100%">
              <Text>Colors</Text>
              <AccordionIcon marginRight={2} />
            </Flex>
          </AccordionButton>
          <AccordionPanel>
            <ColorsPanel
              visuals={visuals}
              setVisualsCallback={setVisualsCallback}
              highlightColor={highlightColor}
              setHighlightColor={setHighlightColor}
            />
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionButton>
            <Flex justifyContent="space-between" w="100%">
              <Text>Nodes & Links</Text>
              <AccordionIcon marginRight={2} />
            </Flex>
          </AccordionButton>
          <AccordionPanel>
            <NodesNLinksPanel
              visuals={visuals}
              setVisuals={setVisualsCallback}
              threeDim={threeDim}
            />
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionButton>
            <Flex justifyContent="space-between" w="100%">
              <Text>Labels</Text>
              <AccordionIcon marginRight={2} />
            </Flex>
          </AccordionButton>
          <AccordionPanel>
            <LabelsPanel visuals={visuals} setVisuals={setVisualsCallback} />
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionButton>
            <Flex justifyContent="space-between" w="100%">
              <Text>Highlighting</Text>
              <AccordionIcon marginRight={2} />
            </Flex>
          </AccordionButton>
          <AccordionPanel>
            <HighlightingPanel visuals={visuals} setVisuals={setVisualsCallback} />
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionButton>
            <Flex justifyContent="space-between" w="100%">
              <Text>Citations</Text>
              <AccordionIcon marginRight={2} />
            </Flex>
          </AccordionButton>
          <AccordionPanel>
            <CitationsPanel visuals={visuals} setVisuals={setVisualsCallback} />
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </VStack>
  )
}