import { Box, Checkbox, Flex, Input, Select, Typography } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { ChangeEvent } from 'react'

import { ChartStore } from '../../ChartStore'
import { AppearanceEnum, AppearanceType, ChartFormData, ColumnLevelEnum } from '../../type'

interface PropsType {
  formData: ChartFormData
  store: ChartStore
}

export const Appearance: React.FC<React.PropsWithChildren<PropsType>> = observer(({ formData }) => {
  return (
    <>
      {formData.appearance.map((config) => {
        switch (config.type) {
          case AppearanceType.Checkbox:
            return (
              <Checkbox
                mb={5}
                size="xs"
                label={config.name}
                checked={config.value}
                onChange={(event) => (config.value = event.currentTarget.checked)}
              />
            )
          case AppearanceType.CheckboxWithInput:
            return (
              <Box>
                <Checkbox
                  mb={5}
                  size="xs"
                  label={config.name}
                  checked={config.checkValue}
                  onChange={(event) => {
                    config.checkValue = event.currentTarget.checked
                    if (config.checkValue === true) {
                      if (config.key === AppearanceEnum.LabelXAxis) {
                        config.value = formData.columnData[ColumnLevelEnum.First]?.value[0]?.field || ''
                      } else if (config.key === AppearanceEnum.LabelYAxis) {
                        const lineValue = formData.columnData[ColumnLevelEnum.Second]?.value || []
                        config.value = lineValue?.map((v) => v.field)?.join(',')
                      }
                    } else {
                      config.value = ''
                    }
                  }}
                />
                {config.checkValue && (
                  <Input
                    mb={8}
                    size="xs"
                    value={config.value}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => (config.value = e.currentTarget.value)}
                  />
                )}
              </Box>
            )
          case AppearanceType.Select:
            return (
              <Flex mb={5} justify="space-between" align="center">
                <Typography c="carbon.8">{config.name}</Typography>
                <Select
                  size="xs"
                  value={config.value}
                  data={config.data}
                  onChange={(e) => e && (config.value = e)}
                ></Select>
              </Flex>
            )
          case AppearanceType.SelectWithIcon:
            return (
              <Flex mb={5} justify="space-between" h={24}>
                <Typography c="carbon.8">{config.name}</Typography>
                <Box>
                  {config.value &&
                    config.data.map((v) => (
                      <Box
                        component={v.icon as any}
                        sx={(theme) => ({
                          cursor: ' pointer',
                          color: config.value === v.value ? theme.colors.carbon[9] : theme.colors.carbon[6]
                        })}
                        onClick={() => (config.value = v.value)}
                      />
                    ))}
                </Box>
              </Flex>
            )
        }
      })}
    </>
  )
})