import { Group } from '@tidbcloud/uikit'
import { FormSelect } from '@tidbcloud/uikit/biz'

import { getCloudProviderLabel } from 'dbaas/features/Project'
import { FormItem } from 'dbaas/screens/NextGen/shared/form-item'
import {
  Commonv1beta1Region,
  V1beta1RegionCloudProvider
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

interface TidbCloudRegionsProps {
  cloudProviders: V1beta1RegionCloudProvider[]
  regions: Commonv1beta1Region[]
  disabled?: boolean
  formCloudProviderName?: string
  formRegionName?: string
  alertInfo?: React.ReactNode
}

export const TidbCloudRegions = ({
  cloudProviders,
  regions,
  disabled,
  formCloudProviderName = 'cloudProvider',
  formRegionName = 'regionId',
  alertInfo
}: TidbCloudRegionsProps) => {
  return (
    <FormItem label="Cloud Provider and Region" description="Choose where to deploy your instance.">
      <Group align="flex-start">
        <FormSelect
          name={formCloudProviderName}
          label="Cloud Provider"
          disabled={cloudProviders.length <= 1 || disabled}
          data={cloudProviders.map((provider) => ({
            value: provider,
            label: getCloudProviderLabel(provider)
          }))}
        />
        <FormSelect
          name={formRegionName}
          label="Region"
          disabled={regions.length <= 1 || disabled}
          data={regions.map((region) => ({ value: region.regionId!, label: region.displayName! }))}
          flex={1}
        />
      </Group>

      {alertInfo}
    </FormItem>
  )
}