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

import { ExportOptionsCSVFormat } from 'dbaas/services/api-clients/legacy/serverless/interface'
import csvFormatTip from 'media/export_csvconfig.png'

const CSVImage = () => {
  return (
    <Box maw={432}>
      <Image src={csvFormatTip} alt="csv-format-tip" width="100%" />
    </Box>
  )
}

interface ExportCSVConfigurationProps {
  defaultValue?: ExportOptionsCSVFormat
  onChange?: (values: ExportOptionsCSVFormat) => void
}

export const initialValues: ExportOptionsCSVFormat = {
  separator: ',',
  delimiter: '"',
  null_value: '\\N',
  skip_header: false
}

export const ExportCSVConfig = ({ defaultValue = initialValues, onChange }: ExportCSVConfigurationProps) => {
  const [values, setValues] = useState(defaultValue)

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

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

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

  return (
    <Stack>
      <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_value}
            onChange={(e: any) => handleChange('null_value', e.target.value, false)}
            onBlur={(e: any) => handleChange('null_value', e.target.value)}
            size="xs"
            w={80}
          />
        </Stack>

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

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

          <ActionIcon variant="default" onClick={handleReset}>
            <IconRefreshCw01 size={14} />
          </ActionIcon>
        </Stack>
      </Group>
      <CSVImage />
    </Stack>
  )
}