import { Stack, Typography } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'
import { useFormContext } from 'react-hook-form'

export const FormJobName = ({ name = 'name' }: { name?: string }) => {
  const { setValue } = useFormContext()

  return (
    <Stack m={24} gap={8}>
      <Typography variant="headline-sm">Job Name</Typography>

      <FormTextInput
        name="name"
        rules={{
          required: 'Required',
          maxLength: { value: 60, message: 'Should be less than 60 characters' },
          pattern: {
            value: /^[A-Za-z][0-9A-Za-z_-]{0,59}$/,
            message: 'Invalid format'
          }
        }}
        onBlur={(e) => setValue(name, e.target.value.trim())}
        placeholder="Name your migration job"
        description="Change the name of your migration job, it must start with a letter, and can consist of letters (A-Z, a-z), numbers (0-9), underscores (_) and hyphens (-) with less than 60 characters."
      />
    </Stack>
  )
}