import { Divider, Group, HoverCard, Input, SimpleGrid, Stack } from '@tidbcloud/uikit'
import { FormNumberInput, FormPasswordInput, FormRadioGroup, FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { useIsEditingChangefeed } from 'dbaas/features/Changefeed'
import {
  PulsarAuthTypeOptions,
  PulsarCompressionOptions,
  PulsarDestinationProtocolOptions
} from 'dbaas/features/Changefeed/constants'
import { HeadLabel } from 'dbaas/screens/ClustersV2/new/components'
import { DataflowNetworkType, DataflowPulsarAuthType } from 'dbaas/services/dataflow/interface'

export function FormPulsar() {
  const { watch } = useFormContext()
  const authType = watch('pulsar_info.authentication.auth_type')
  const isEditing = useIsEditingChangefeed()
  return (
    <>
      <Divider />

      <Stack m={24}>
        <HeadLabel label="Connection" />

        <FormRadioGroup
          label="Destination Protocol"
          name="pulsar_info.destination_protocol"
          data={PulsarDestinationProtocolOptions}
        />

        <FormSelect
          name="network_info.network_type"
          label="Connectivity Method"
          disabled={isEditing}
          data={[
            {
              label: 'VPC Peering',
              value: DataflowNetworkType.NetworkType_VPC_Peering
            },
            {
              label: 'Public',
              value: DataflowNetworkType.NetworkType_Public
            }
          ]}
        />

        <FormTextInput
          name="pulsar_info.endpoint"
          label="Pulsar Broker"
          placeholder="Enter your Pulsar broker endpoint, e.g. example.com:6650"
          disabled={isEditing}
        />
      </Stack>

      <Divider />

      <Stack m={24}>
        <HeadLabel label="Authentication" />

        <FormRadioGroup name="pulsar_info.authentication.auth_type" label="Auth Type" data={PulsarAuthTypeOptions} />

        {authType === DataflowPulsarAuthType.PULSAR_AUTH_TYPE_BASIC && (
          <Group grow>
            <FormTextInput
              name="pulsar_info.authentication.user_name"
              label="User Name"
              placeholder="Enter your Pulsar user name"
            />

            <FormPasswordInput
              name="pulsar_info.authentication.password"
              label="Password"
              placeholder="Enter your Pulsar password"
            />
          </Group>
        )}

        {authType === DataflowPulsarAuthType.PULSAR_AUTH_TYPE_TOKEN && (
          <FormTextInput name="pulsar_info.authentication.token" label="Token" placeholder="Enter your token" />
        )}
      </Stack>

      <Divider />

      <Stack m={24}>
        <HeadLabel label="Advanced Settings " />

        <SimpleGrid cols={3}>
          <FormSelect name="pulsar_info.compression_type" label="Compression" data={PulsarCompressionOptions} />

          <FormNumberInput
            name="pulsar_info.advanced_setting.batching_max_messages"
            label={
              <Input.Label mb={0}>
                <Group gap={8}>
                  <span>Max Messages per Batch</span>
                  <HoverCard>
                    <HoverCard.Target>
                      <IconInfoCircle size={16} />
                    </HoverCard.Target>
                    <HoverCard.Dropdown maw={400}>
                      The maximum number of messages in a single batch for a Pulsar producer to send.
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Group>
              </Input.Label>
            }
            placeholder="Enter the batching max messages"
            min={1}
            max={100000}
          />

          <FormNumberInput
            name="pulsar_info.advanced_setting.batching_max_publish_delay"
            label={
              <Input.Label mb={0}>
                <Group gap={8}>
                  <span>Max Publish Delay</span>
                  <HoverCard>
                    <HoverCard.Target>
                      <IconInfoCircle size={16} />
                    </HoverCard.Target>
                    <HoverCard.Dropdown maw={400}>
                      The interval at which Pulsar producer messages are saved for batching.
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Group>
              </Input.Label>
            }
            placeholder="Enter the batching max publish delay"
            suffix=" ms"
            min={1}
            max={1000000}
          />

          <FormNumberInput
            name="pulsar_info.advanced_setting.connection_timeout"
            label="Connection Timeout"
            placeholder="Enter the connection timeout"
            min={0}
            max={100000}
            suffix=" s"
          />

          <FormNumberInput
            name="pulsar_info.advanced_setting.operation_timeout"
            label="Operation Timeout"
            placeholder="Enter the operation timeout"
            min={0}
            max={100000}
            suffix=" s"
          />

          <FormNumberInput
            name="pulsar_info.advanced_setting.send_timeout"
            label="Send Timeout"
            placeholder="Enter the send timeout"
            min={0}
            max={100000}
            suffix=" s"
          />
        </SimpleGrid>
      </Stack>
    </>
  )
}