import { Group, Stack, Typography } from '@tidbcloud/uikit'
import { FormSelect } 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 = [
  {
    label: getHADescription(V1beta2TidbHighAvailabilityType.ZONAL),
    value: V1beta2TidbHighAvailabilityType.ZONAL
  },
  {
    label: getHADescription(V1beta2TidbHighAvailabilityType.REGIONAL),
    value: V1beta2TidbHighAvailabilityType.REGIONAL
  }
]

interface HighAvailabilitySectionProps {
  name?: string
  extraDesc?: string
  optionsOverride?: {
    [key in V1beta2TidbHighAvailabilityType]?: {
      label?: string
      disabled?: boolean
    }
  }
}

export const HighAvailabilitySection = ({
  name = 'highAvailabilityType',
  extraDesc,
  optionsOverride
}: HighAvailabilitySectionProps) => {
  const options = useMemo(() => {
    return highAvailabilityOptions
      .map((option) => {
        return {
          ...option,
          ...(optionsOverride?.[option.value] || {})
        }
      })
      .filter((option) => !option.disabled)
  }, [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}` : ''}
        </Typography>
      </Stack>
      <FormSelect name={name} data={options} disabled={options.length <= 1} />
    </Group>
  )
}