import { Anchor, Group, Stack, Typography } from '@tidbcloud/uikit'
import { FormSelect } from '@tidbcloud/uikit/biz'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'
import { useEffect } from 'react'
import { useFormContext } from 'react-hook-form'

import { V1beta2TidbHighAvailabilityType } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

import { EssentialV2FormValue } from '../types'

export function HighAvailabilitySection() {
  const { setValue } = useFormContext<EssentialV2FormValue>()

  const haOptions = [
    {
      value: V1beta2TidbHighAvailabilityType.ZONAL,
      label: 'Zonal'
    }
  ]

  useEffect(() => {
    setValue('highAvailabilityType', V1beta2TidbHighAvailabilityType.ZONAL)
  }, [setValue])

  return (
    <Group justify="space-between" p="xl" wrap="nowrap">
      <Stack gap={4} flex={1}>
        <Typography variant="title-lg">High Availability</Typography>
        <Typography variant="body-lg" c="carbon.7">
          High availability with lower latency in a single zone.{' '}
          <Anchor
            target="_blank"
            rel="noreferrer"
            href="https://docs.pingcap.com/tidbcloud/serverless-high-availability"
            sx={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
          >
            Learn more <IconLinkExternal01 size={14} />
          </Anchor>
        </Typography>
      </Stack>
      <FormSelect name="highAvailabilityType" data={haOptions} disabled />
    </Group>
  )
}