import { ActionIcon, Box, Group, Input, Stack, Switch, Typography, useComputedColorScheme } from '@tidbcloud/uikit'
import { IconRefreshCw01 } from '@tidbcloud/uikit/icons'
import { useState } from 'react'

import { DefaultCSVFormat } from 'dbaas/screens/DataImportV2/constant'
import { DataflowCustomCSVFormat } from 'dbaas/services/dataflow/interface'
import { eventTracking } from 'dbaas/utils/tracking'
import csvFormatTip from 'media/csv_format_tip.svg'
import csvFormatTipDark from 'media/csv_format_tip_dark.svg'

export const CSVImage = () => {
  const colorScheme = useComputedColorScheme()
  return (
    <Box>
      <img src={colorScheme === 'light' ? csvFormatTip : csvFormatTipDark} alt="" width="100%" />
    </Box>
  )
}

interface CSVConfigurationProps {
  defaultValue?: DataflowCustomCSVFormat
  onChange?: (values: DataflowCustomCSVFormat) => void
  hideHeaderOption?: boolean
  w?: number | string
}

const CSVConfiguration = ({
  defaultValue = DefaultCSVFormat,
  onChange,
  hideHeaderOption = false,
  w = '100%'
}: CSVConfigurationProps) => {
  const [values, setValues] = useState(defaultValue)

  const handleChange = (key: keyof DataflowCustomCSVFormat, value: any, immediate: boolean = true) => {
    const next = { ...values, [key]: value }
    setValues(next)

    if (immediate) {
      onChange?.(next)
    }
  }

  const handleReset = () => {
    const next = { ...values, ...defaultValue }
    setValues(next)
    onChange?.(next)
  }

  return (
    <Stack w={w}>
      <Group>
        <Stack gap={4}>
          <Typography variant="label-lg">Separator</Typography>
          <Input
            value={values.separator}
            onChange={(e: any) => handleChange('separator', e.target.value, false)}
            onBlur={(e: any) => handleChange('separator', e.target.value)}
            size="xs"
            w={80}
          />
        </Stack>

        <Stack gap={4}>
          <Typography variant="label-lg">Delimiter</Typography>
          <Input
            value={values.delimiter}
            onChange={(e: any) => handleChange('delimiter', e.target.value, false)}
            onBlur={(e: any) => handleChange('delimiter', e.target.value)}
            size="xs"
            w={80}
          />
        </Stack>

        <Stack gap={4}>
          <Typography variant="label-lg">Null Value</Typography>
          <Input
            value={values.null}
            onChange={(e: any) => handleChange('null', e.target.value, false)}
            onBlur={(e: any) => handleChange('null', e.target.value)}
            size="xs"
            w={80}
          />
        </Stack>

        <Stack gap={4}>
          <Typography variant="label-lg">Backslash Escape</Typography>
          <Box h={30} py={4}>
            <Switch
              checked={values.backslash_escape}
              onChange={(e) => handleChange('backslash_escape', e.currentTarget.checked)}
            />
          </Box>
        </Stack>

        {!hideHeaderOption && (
          <Stack gap={4}>
            <Typography variant="label-lg">Skip Header</Typography>
            <Box h={30} py={4}>
              <Switch
                checked={values.header}
                onChange={(e) => {
                  const val = e.currentTarget.checked
                  handleChange('header', val)
                  eventTracking('CSV With Header Changed', { header: val })
                }}
              />
            </Box>
          </Stack>
        )}

        <Stack gap={4}>
          <Typography variant="label-lg">Reset</Typography>

          <ActionIcon variant="default" onClick={handleReset} data-mp-event="mp-reset-1691461012947">
            <IconRefreshCw01 size={14} />
          </ActionIcon>
        </Stack>
      </Group>

      <CSVImage />
    </Stack>
  )
}

export default CSVConfiguration