import { Group, SegmentedControlItem, Stack, Typography } from '@tidbcloud/uikit'
import { FormSegmentedControl } from '@tidbcloud/uikit/biz'
import { useMemo } from 'react'

import { getHADescription } from 'dbaas/screens/NextGen/shared/model/high-availability'
import { V1beta2TidbHighAvailabilityType } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

const highAvailabilityOptions: SegmentedControlItem[] = [
  {
    label: getHADescription(V1beta2TidbHighAvailabilityType.ZONAL),
    value: V1beta2TidbHighAvailabilityType.ZONAL
  },
  {
    label: getHADescription(V1beta2TidbHighAvailabilityType.REGIONAL),
    value: V1beta2TidbHighAvailabilityType.REGIONAL
  }
]

interface TidbHighAvailabilityProps {
  /**
   * Form item name of the high availability type
   * Default to 'highAvailabilityType'
   */
  name?: string
  withBorderBottom?: boolean
  extraDesc?: string
  optionsOverride?: {
    [key in V1beta2TidbHighAvailabilityType]?: {
      label?: string
      disabled?: boolean
    }
  }
}

export const TidbHighAvailability = ({
  name = 'highAvailabilityType',
  extraDesc,
  optionsOverride
}: TidbHighAvailabilityProps) => {
  const options = useMemo(() => {
    return highAvailabilityOptions.map<SegmentedControlItem>((option) => {
      return {
        ...option,
        ...(optionsOverride?.[option.value] || {})
      }
    })
  }, [optionsOverride])

  return (
    <Group justify="space-between" p="xl">
      <Stack gap={4} sx={{ flex: 1 }}>
        <Typography variant="title-lg">High Availability</Typography>
        <Typography variant="body-lg" c="carbon.7">
          High availability within a single availability zone with minimal latency.{extraDesc ? ` ${extraDesc}` : ''}{' '}
          {/* TODO: add doc link back after the doc is ready */}
          {/* <Anchor
            target="_blank"
            rel="noreferrer"
            href=""
            sx={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
          >
            Learn more <IconLinkExternal01 size={14} />
          </Anchor> */}
        </Typography>
      </Stack>
      <FormSegmentedControl name={name} data={options} />
    </Group>
  )
}