import { Box, StackDivider, VStack } from '@chakra-ui/react'
import React from 'react'
import { ColorMenu } from './ColorMenu'
import { colorList, initialVisuals } from './config'
import { EnableSection } from './EnableSection'
import { SliderWithInfo } from './SliderWithInfo'

export interface NodesNLinksPanelProps {
  visuals: typeof initialVisuals
  setVisuals: any
  threeDim: boolean
}

export const NodesNLinksPanel = (props: NodesNLinksPanelProps) => {
  const { visuals, setVisuals, threeDim } = props
  return (
    <VStack
      spacing={2}
      justifyContent="flex-start"
      divider={<StackDivider borderColor="gray.500" />}
      align="stretch"
      color="gray.800"
    >
      <Box>
        <SliderWithInfo
          label="Node size"
          value={visuals.nodeRel}
          onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
        />
        <SliderWithInfo
          label="Node connections size scale"
          value={visuals.nodeSizeLinks}
          min={0}
          max={2}
          onChange={(value) => setVisuals({ ...visuals, nodeSizeLinks: value })}
        />
        <SliderWithInfo
          label="Node zoom invariance"
          value={visuals.nodeZoomSize}
          min={0}
          max={2}
          infoText="How much the graph will try to keep the nodesize consistent across zoom scales. 0 is no consistency, node will always be their true size, 1 is linear, 2 is quadratic."
          onChange={(value) =>
            setVisuals((prev: typeof initialVisuals) => ({
              ...prev,
              nodeZoomSize: value,
            }))
          }
        />
        {threeDim && (
          <>
            <SliderWithInfo
              label="Node opacity"
              value={visuals.nodeOpacity}
              min={0}
              max={1}
              onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })}
            />
            <SliderWithInfo
              label="Node resolution"
              value={visuals.nodeResolution}
              min={5}
              max={32}
              step={1}
              onChange={(value) => setVisuals({ ...visuals, nodeResolution: value })}
            />
          </>
        )}
        <SliderWithInfo
          label="Link width"
          value={visuals.linkWidth}
          onChange={(value) => setVisuals({ ...visuals, linkWidth: value })}
        />
        {threeDim && (
          <SliderWithInfo
            label="Link opacity"
            min={0}
            max={1}
            value={visuals.linkOpacity}
            onChange={(value) => setVisuals({ ...visuals, linkOpacity: value })}
          />
        )}
        <EnableSection
          label="Link arrows"
          value={visuals.arrows}
          onChange={() => setVisuals({ ...visuals, arrows: !visuals.arrows })}
        >
          <SliderWithInfo
            label="Arrow size"
            value={visuals.arrowsLength / 10}
            onChange={(value) => setVisuals({ ...visuals, arrowsLength: 10 * value })}
          />
          <SliderWithInfo
            label="Arrow Position"
            value={visuals.arrowsPos}
            min={0}
            max={1}
            step={0.01}
            onChange={(value) => setVisuals({ ...visuals, arrowsPos: value })}
          />
          <ColorMenu
            colorList={colorList}
            label="Arrow Color"
            key="arrow"
            setVisuals={setVisuals}
            value="arrowsColor"
            visValue={visuals.arrowsColor}
          />
        </EnableSection>
        <EnableSection
          label="Directional Particles"
          value={visuals.particles}
          onChange={() => setVisuals({ ...visuals, particles: !visuals.particles })}
        >
          <SliderWithInfo
            label="Particle Number"
            value={visuals.particlesNumber}
            max={5}
            step={1}
            onChange={(value) => setVisuals({ ...visuals, particlesNumber: value })}
          />
          <SliderWithInfo
            label="Particle Size"
            value={visuals.particlesWidth}
            onChange={(value) => setVisuals({ ...visuals, particlesWidth: value })}
          />
        </EnableSection>
      </Box>
    </VStack>
  )
}