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 { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { DataflowNetworkType, DataflowPulsarAuthType } from 'dbaas/services/dataflow/interface'

const getNetworkTypeOptions = (cluster: SharedTiDB) => {
  const options = [
    {
      label: 'VPC Peering',
      value: DataflowNetworkType.NetworkType_VPC_Peering
    },
    {
      label: 'Public',
      value: DataflowNetworkType.NetworkType_Public
    }
  ]

  if (cluster.computed.isEssentialV2) {
    return options.filter((option) => option.value !== DataflowNetworkType.NetworkType_VPC_Peering)
  }

  return options
}

export function FormPulsar({ cluster }: { cluster: SharedTiDB }) {
  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={getNetworkTypeOptions(cluster)}
        />

        <FormTextInput
          name="pulsar_info.endpoint"
          label="Pulsar Broker"
          placeholder="Enter your Pulsar broker endpoint, e.g. example.com:6650"
          rules={{ required: 'Required' }}
          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 align="flex-start">
            <FormTextInput
              name="pulsar_info.authentication.user_name"
              label="User Name"
              placeholder="Enter your Pulsar user name"
              rules={{ required: 'Required' }}
            />

            <FormPasswordInput
              name="pulsar_info.authentication.password"
              label="Password"
              placeholder="Enter your Pulsar password"
              rules={{ required: 'Required' }}
            />
          </Group>
        )}

        {authType === DataflowPulsarAuthType.PULSAR_AUTH_TYPE_TOKEN && (
          <FormTextInput
            name="pulsar_info.authentication.token"
            label="Token"
            placeholder="Enter your token"
            rules={{ required: 'Required' }}
          />
        )}
      </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>
    </>
  )
}