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

import { getCloudProviderLabel } from 'dbaas/features/Project'
import { Commonv1beta1Region } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

import { FormItem } from './FormItem'

type ProviderRegionProps = {
  providers: string[]
  regions: Commonv1beta1Region[]
  disabled?: boolean
}

export const ProviderRegion = ({ providers, regions, disabled }: ProviderRegionProps) => {
  return (
    <FormItem label="Cloud Provider & Region" description="Select your cloud provider and region">
      <Group>
        <FormSelect
          name="provider"
          label="Cloud Provider"
          disabled={providers.length <= 1 || disabled}
          data={providers.map((provider) => ({
            value: provider,
            label: getCloudProviderLabel(provider)
          }))}
        />
        <FormSelect
          name="region"
          label="Region"
          disabled={regions.length <= 1 || disabled}
          data={regions.map((region) => ({ value: region.name!, label: region.displayName! }))}
          sx={{
            flexGrow: 1
          }}
        />
      </Group>
    </FormItem>
  )
}