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

import { useIsEditingChangefeed } from 'dbaas/features/Changefeed'
import { CardSection } from 'dbaas/screens/Changefeed/CreateOrEditChangefeed/step2/CardSection'

import { useTsoDescription } from './FormStartPosition'

export function FormTiDBServerless() {
  const { control, watch } = useFormContext()
  const isEditing = useIsEditingChangefeed()
  const tso: string = watch('tidb.mysql_info.start_position.tso')
  const tsoDesciption = useTsoDescription(tso)

  return (
    <CardSection title="Start Replication Position">
      <Controller
        name="tidb.mysql_info.start_position.mode"
        control={control}
        render={({ field }) => <input {...field} hidden />}
      />

      <FormTextInput
        rules={{ required: 'Required' }}
        name="tidb.mysql_info.start_position.tso"
        label="Start replication from a specific TSO"
        placeholder="Enter the TSO value such as 419035700154597378"
        inputWrapperOrder={['input', 'error', 'description']}
        description={tsoDesciption}
        disabled={isEditing}
      />
    </CardSection>
  )
}