import { Flex, Tooltip, ActionIcon } from '@tidbcloud/uikit'
import { FormNumberInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

const NumberInputWithTip: React.FC<
  React.PropsWithChildren<{
    label: string | React.ReactNode
    name: string
    defaultValue?: number
    max?: number
    min?: number
    tooltips: string
    onchange?: (val: number | undefined) => void
  }>
> = ({ label, name, defaultValue, max, min, tooltips, onchange }) => {
  return (
    <FormNumberInput
      hideControls
      name={name}
      label={
        <Flex gap={8} align="flex-start">
          {label}
          <Tooltip label={tooltips} withArrow arrowPosition="center" arrowSize={6}>
            <ActionIcon aria-hidden variant="transparent" size="sm">
              <IconInfoCircle size={14} />
            </ActionIcon>
          </Tooltip>
        </Flex>
      }
      defaultValue={defaultValue}
      min={min}
      max={max}
      autoComplete="off"
      size="xs"
      rules={{
        required: 'Required',
        validate: (val) => {
          if (min === undefined && max === undefined) {
            return true
          }

          if (val < (min === undefined ? -Infinity : min) || val > (max === undefined ? Infinity : max)) {
            return `The value must be in the range of ${min}-${max}`
          }
        }
      }}
      onChange={(val) => {
        onchange?.(Number(val))
      }}
    />
  )
}

export default NumberInputWithTip