import { Group, HoverCard, Input } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { DataflowDispatchType } from 'dbaas/services/dataflow/interface'

export function FormTopicName({ name, tooltip }: { name: string; tooltip: string }) {
  const { watch } = useFormContext()
  const topicDispatcher = watch(`${name}.dispatch_type`)
  const isOneTopic = topicDispatcher === DataflowDispatchType.DISPATCH_TYPE_ONE_TOPIC

  return (
    <FormTextInput
      label={
        <Input.Label mb={0}>
          <Group gap={8}>
            <span>{isOneTopic ? 'Topic Name' : `Default Topic Name`}</span>
            {!isOneTopic && (
              <HoverCard>
                <HoverCard.Target>
                  <IconInfoCircle size={14} />
                </HoverCard.Target>
                <HoverCard.Dropdown maw={400}>{tooltip}</HoverCard.Dropdown>
              </HoverCard>
            )}
          </Group>
        </Input.Label>
      }
      name={`${name}.default_topic`}
      rules={{
        required: isOneTopic ? 'Required' : false
      }}
      placeholder={isOneTopic ? `Enter the topic name` : `Enter the default topic name`}
    />
  )
}