import { Anchor, Group, Stack, Typography } from '@tidbcloud/uikit'
import { FormSelect } from '@tidbcloud/uikit/biz'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'

import { HADescriptions } from 'dbaas/screens/ClustersV2/new/Serverless/FormContent/AdvancedSettings'
import { Serverlessv1beta1ClusterHighAvailabilityType } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'
import { isEssentialRegionalHAEnabled } from 'dbaas/utils/feature-flags'

const HAOptions = [
  {
    label: HADescriptions[Serverlessv1beta1ClusterHighAvailabilityType.ZONAL],
    value: Serverlessv1beta1ClusterHighAvailabilityType.ZONAL
  },
  {
    label: HADescriptions[Serverlessv1beta1ClusterHighAvailabilityType.REGIONAL],
    value: Serverlessv1beta1ClusterHighAvailabilityType.REGIONAL
  }
]

export const HighAvailability = ({ region }: { region?: string }) => {
  const regionalEnabled = isEssentialRegionalHAEnabled(region ?? '')

  return (
    <Group justify="space-between" align="flex-start" p="xl">
      <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
          {regionalEnabled ? `, or greater fault tolerance with redundancy across multiple zones` : ''}.{' '}
          <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>
  )
}