import { Group, Stack } from '@tidbcloud/uikit'
import { FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { useMemo } from 'react'

import { getCloudProviderLabel } from 'dbaas/features/Project'
import { FormItem } from 'dbaas/screens/NextGen/my-tidb-creation/shared/FormItem'
import {
  MarketplaceRestrictionAlert,
  MarketplaceRestrictionHoverCard
} from 'dbaas/screens/NextGen/my-tidb-creation/shared/MarketplaceRestriction'
import {
  PROJECT_SELECTOR_WIDTH,
  ProjectGroupSection
} from 'dbaas/screens/NextGen/my-tidb-creation/shared/ProjectGroupSection'
import { Commonv1beta1Region } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

interface BasicSettingsSectionProps {
  cloudProviders: string[]
  regions: Commonv1beta1Region[]
  disabled: boolean
  projectOptions: { value: string; label: string }[]
  onProjectCreated?: () => void
  projectOptional?: boolean
}

export function BasicSettingsSection({
  cloudProviders,
  regions,
  disabled,
  projectOptions,
  onProjectCreated,
  projectOptional = true
}: BasicSettingsSectionProps) {
  const regionData = useMemo(() => regions.map((r) => ({ value: r.regionId!, label: r.displayName! })), [regions])

  return (
    <FormItem
      label="Basic Settings"
      description="Set up the project, instance name, cloud provider, and region for your new TiDB Cloud Essential instance."
    >
      <Stack gap="md">
        <Group align="flex-start">
          <ProjectGroupSection
            projectOptions={projectOptions}
            onProjectCreated={onProjectCreated}
            optional={projectOptional}
          />
          <FormTextInput
            name="name"
            label="Instance Name"
            placeholder="Enter instance name"
            disabled={disabled}
            flex={1}
          />
        </Group>
        <Group align="flex-start">
          <MarketplaceRestrictionHoverCard
            availableProviderCount={cloudProviders.length}
            width={PROJECT_SELECTOR_WIDTH}
          >
            <FormSelect
              name="provider"
              label="Cloud Provider"
              w="100%"
              disabled={cloudProviders.length <= 1 || disabled}
              data={cloudProviders.map((p) => ({ value: p, label: getCloudProviderLabel(p) }))}
            />
          </MarketplaceRestrictionHoverCard>
          <FormSelect
            name="region"
            label="Region"
            flex={1}
            disabled={regionData.length <= 1 || disabled}
            data={regionData}
          />
        </Group>
        <MarketplaceRestrictionAlert />
      </Stack>
    </FormItem>
  )
}