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 { EssentialRegionOption } from '../essential-regions'

interface BasicSettingsSectionProps {
  cloudProviders: string[]
  regions: EssentialRegionOption[]
  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.value, label: r.label })), [regions])

  return (
    <div data-testid="adaptive-essential-basic-settings">
      <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>
    </div>
  )
}