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

import { getTopicDistributionModeOptions } from 'dbaas/features/Changefeed/constants'
import {
  DataflowDescribeSchemaTableResp,
  DataflowDispatchType,
  DataflowProtocol
} from 'dbaas/services/dataflow/interface'

import { CardSection } from './CardSection'
import { FormPartitionDistribution } from './FormPartitionDistribution'
import { FormStartPosition } from './FormStartPosition'
import { FormTopicFormat } from './FormTopicFormat'
import { FormTopicName } from './FormTopicName'

export function FormPulsar({ schemaTableData }: { schemaTableData?: DataflowDescribeSchemaTableResp }) {
  const { watch } = useFormContext()
  const dispatchType = watch('pulsar_info.topic_distribution.dispatch_type')
  const isOneTopic = dispatchType === DataflowDispatchType.DISPATCH_TYPE_ONE_TOPIC
  const topicDistributionModeOptions = useMemo(
    () => getTopicDistributionModeOptions({ target: 'Pulsar' }).filter((i) => i.enabled),
    []
  )
  return (
    <>
      <CardSection title="Start Replication Position">
        <FormStartPosition name="pulsar_info.start_position" schemaTableData={schemaTableData} />
      </CardSection>

      <CardSection title="Data Format">
        <FormSelect
          name="pulsar_info.data_format.protocol"
          data={[
            {
              value: DataflowProtocol.CANAL_JSON,
              label: 'Canal-JSON'
            }
          ]}
        />

        <FormSwitch
          name="pulsar_info.data_format.enable_tidb_extension"
          label="Enable TiDB Extension"
          styles={{ label: { fontWeight: 500 } }}
          description={
            <Typography variant="body-md" c="carbon.6">
              Add some{' '}
              <a
                target="_blank"
                rel="noopener noreferrer"
                href="https://docs.pingcap.com/tidb/stable/ticdc-canal-json/#tidb-extension-field"
              >
                TiDB extension fields
              </a>{' '}
              to the message body.
            </Typography>
          }
        />
      </CardSection>

      <CardSection title="Topic Distribution">
        <FormSelect
          label="Distribution Mode"
          name="pulsar_info.topic_distribution.dispatch_type"
          data={topicDistributionModeOptions}
          inputWrapperOrder={['label', 'input', 'description', 'error']}
          description={
            <span
              dangerouslySetInnerHTML={{
                __html: topicDistributionModeOptions.find((i) => i.value === dispatchType)?.desc ?? ''
              }}
            />
          }
        />
        <FormTextInput
          label={
            <Input.Label mb={0}>
              <Group gap={8}>
                <span>Pulsar Tenant</span>
                <HoverCard>
                  <HoverCard.Target>
                    <IconInfoCircle size={16} />
                  </HoverCard.Target>
                  <HoverCard.Dropdown maw={400}>
                    Enter the Pulsar Tenant's name here to send events to the correct Pulsar topic.
                  </HoverCard.Dropdown>
                </HoverCard>
              </Group>
            </Input.Label>
          }
          name="pulsar_info.topic_distribution.pulsar_tenant"
          placeholder="Enter the Pulsar tenant"
        />
        <FormTextInput
          label={
            <Input.Label mb={0}>
              <Group gap={8}>
                <span>Pulsar Namespace</span>
                <HoverCard>
                  <HoverCard.Target>
                    <IconInfoCircle size={16} />
                  </HoverCard.Target>
                  <HoverCard.Dropdown maw={400}>
                    Enter the Pulsar Namespace's name here to send events to the correct Pulsar topic.
                  </HoverCard.Dropdown>
                </HoverCard>
              </Group>
            </Input.Label>
          }
          name="pulsar_info.topic_distribution.pulsar_namespace"
          placeholder="Enter the Pulsar namespace"
        />
        <FormTopicName
          name="pulsar_info.topic_distribution"
          tooltip="Enter the default Pulsar Topic name to send events to."
        />
        {!isOneTopic && <FormTopicFormat name="pulsar_info.topic_distribution" />}

        <Alert color="peacock" title="Note" icon={<IconInfoCircle size={16} />}>
          The Pulsar topics must be created in advance. The changefeed does not automatically create these topics on
          Pulsar for you.
        </Alert>
      </CardSection>

      <CardSection title="Partition Distribution">
        <FormPartitionDistribution target="Pulsar" name="pulsar_info.partition_dispatchers" />
      </CardSection>
    </>
  )
}