import { Box, ComboboxData, Divider, Flex, Typography } from '@tidbcloud/uikit'
import { FormNumberInput, FormSelect } from '@tidbcloud/uikit/biz'
import { useEffect } from 'react'
import { useFormContext } from 'react-hook-form'

import LogRedacted from './LogRedacted'

interface LogSettingProps {
  maxSizeName: string
  maxSizeOptions?: ComboboxData
  maxSizeNumber?: number
  minSizeNumber?: number
  maxAgeSecondName: string
  maxAgeSecondsOptions?: ComboboxData
  maxAgeSecondsNumber?: number
  minAgeSecondsNumber?: number
  redactedName: string
  fileSizeMode?: 'select' | 'input'
  rotationMode?: 'select' | 'input'
  entityName?: 'cluster' | 'instance'
}
export const LogSetting = ({
  maxSizeName,
  maxSizeOptions,
  maxSizeNumber,
  minSizeNumber,
  maxAgeSecondName,
  maxAgeSecondsOptions,
  maxAgeSecondsNumber,
  minAgeSecondsNumber,
  redactedName,
  fileSizeMode,
  rotationMode,
  entityName = 'cluster'
}: LogSettingProps) => {
  const { setValue } = useFormContext()

  const formSelectBaseStyles = (theme) => ({
    root: {
      flex: 1
    },
    section: {
      '&[data-position="left"]': {
        color: theme.colors.carbon[9],
        borderRight: `1px solid ${theme.colors.carbon[4]}`,
        backgroundColor: theme.colors.carbon[2],
        marginRight: 10
      }
    },
    input: {
      flex: 1
    }
  })

  useEffect(() => {
    setValue(maxSizeName, minSizeNumber)
  }, [minSizeNumber])

  return (
    <Box>
      <Typography variant="label-lg" mb={8}>
        Log File Rotation
      </Typography>
      <Flex gap={16}>
        {fileSizeMode === 'input' ? (
          <FormNumberInput
            name={maxSizeName}
            suffix=" MiB"
            min={minSizeNumber}
            max={maxSizeNumber}
            rules={{
              required: 'Required',
              min: { value: minSizeNumber ?? 0, message: `File Size Limit should be greater than ${minSizeNumber}` },
              max: { value: maxSizeNumber ?? 0, message: `File Size Limit should be less than ${maxSizeNumber}` },
              validate: (val) => {
                if (val % 1 !== 0) {
                  return 'File Size Limit should be integer'
                }
                return true
              }
            }}
            leftAddon="File Size Limit"
          />
        ) : (
          <FormSelect
            name={maxSizeName}
            leftSectionWidth={112}
            leftSection="File Size Limit"
            styles={(theme) => ({
              ...formSelectBaseStyles(theme),
              input: {
                paddingLeft: 126
              }
            })}
            data={maxSizeOptions}
          />
        )}

        {rotationMode === 'input' ? (
          <FormNumberInput
            name={maxAgeSecondName}
            suffix=" minutes"
            min={minAgeSecondsNumber}
            max={maxAgeSecondsNumber}
            step={10}
            rules={{
              required: 'Required',
              min: {
                value: minAgeSecondsNumber ?? 0,
                message: `Rotation Interval should be greater than ${minAgeSecondsNumber}`
              },
              max: {
                value: maxAgeSecondsNumber ?? 0,
                message: `Rotation Interval should be less than ${maxAgeSecondsNumber}`
              },
              validate: (val) => {
                if (val % 1 !== 0) {
                  return 'Rotation Interval should be integer'
                }
                return true
              }
            }}
            leftAddon="Rotation Interval"
          />
        ) : (
          <FormSelect
            name={maxAgeSecondName}
            leftSectionWidth={132}
            leftSection="Rotation Interval"
            data={maxAgeSecondsOptions}
            styles={(theme) => ({
              ...formSelectBaseStyles(theme),
              input: {
                paddingLeft: 146
              }
            })}
          />
        )}
      </Flex>

      <Divider mx={-24} my={24} />

      <LogRedacted redactedName={redactedName} entityName={entityName} />
    </Box>
  )
}