import { useChartColors } from '@tidb-cloud-uikit/theme/Chart'
import { Box, Flex, Menu } from '@tidbcloud/uikit'
import { IconPlus } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useCallback, useMemo, useState } from 'react'

import { eventTracking } from 'dbaas/utils/tracking'

import { ChartStore } from '../../ChartStore'
import { Field, ChartFormData, ColumnUsesEnum, ColumnLevelEnum } from '../../type'
import { duplicateColumnCheck } from '../../util'
import { addColumnCommand } from '../Command'

import { ChartSelector } from './ChartSelector'

interface PropsType {
  formData: ChartFormData
  fields: Field[]
  uses?: ColumnUsesEnum
  level?: ColumnLevelEnum
  store: ChartStore
}

export const AddColumn: React.FC<React.PropsWithChildren<PropsType>> = observer(
  ({ formData, fields, uses, level, store }) => {
    const [opened, setOpened] = useState<boolean>(false)

    const { chartColorsOpacity08 } = useChartColors()

    const maxHeight = useMemo(() => {
      return document.body.clientHeight - 100
    }, [])

    const closeMenu = useCallback(() => {
      setOpened(false)
    }, [])

    const display = !(!uses && Object.values(formData.columnData).every((v) => v.onlyOne))

    const currentColumnFormData = level ? formData.columnData[level] : null

    const useAsDisplay = currentColumnFormData ? (
      currentColumnFormData.onlyOne ? (
        <span>{uses}</span>
      ) : (
        <Box component={currentColumnFormData.icon as any} w={16} h={16} miw={16} color={chartColorsOpacity08[0]} />
      )
    ) : null

    return display ? (
      <Menu
        transitionProps={{ transition: 'pop' }}
        position="left-end"
        opened={opened}
        withArrow
        arrowPosition="center"
        onChange={setOpened}
      >
        <Menu.Target>
          <Flex align="center">
            {useAsDisplay}
            {uses && (
              <Box
                h={1}
                mx={3}
                sx={(theme) => ({ flex: 1, borderBottom: `1px solid ${theme.colors.carbon[5]}` })}
              ></Box>
            )}
            <Flex
              align="center"
              py={5}
              px={7}
              sx={(theme) => ({
                cursor: 'pointer',
                borderRadius: theme.defaultRadius,
                fontWeight: 600,
                color: theme.colors.carbon[8],
                fontSize: 13,
                ':hover': {
                  background: theme.colors.carbon[3]
                }
              })}
            >
              <IconPlus size={16} />
              <span>Add Column</span>
            </Flex>
          </Flex>
        </Menu.Target>
        <Menu.Dropdown>
          <Flex w={220} my={-4} mx={4} direction="column" style={{ maxHeight, overflowY: 'auto', overflowX: 'hidden' }}>
            <ChartSelector
              data={fields.map((v) => ({
                value: v.name,
                label: v.name,
                icon: v.icon,
                disabled: duplicateColumnCheck(formData, v.name)
              }))}
              onChange={(v) => {
                if (v) {
                  eventTracking('Chat2Chart Add Column', {
                    value: v
                  })
                  const field = fields.filter((f) => f.name === v)[0]
                  addColumnCommand(v, field.type, formData, uses, level)
                  store.generateData()
                  closeMenu()
                }
              }}
            />
          </Flex>
        </Menu.Dropdown>
      </Menu>
    ) : null
  }
)