import React, { useState } from 'react'

import { DebounceSelect } from './DebounceSelect'

const REGIONS = [
  // aws
  'us-west-2',
  'us-east-1',
  'ap-northeast-1',
  'ap-southeast-1',
  'eu-central-1',

  // gcp
  'us-west1',
  'us-west2',
  'us-central1',
  'asia-east1',
  'asia-southeast1',
  'asia-northeast1'
]

// Usage of DebounceSelect
interface RegionValue {
  label: string
  value: string
}

async function fetchRegionList(keyword: string): Promise<RegionValue[]> {
  const filteredRegions = REGIONS.filter((r) => {
    if (keyword === '') return true
    return r.indexOf(keyword) >= 0
  }).map((r) => ({ label: r, value: r }))
  return Promise.resolve(filteredRegions)
}

export interface RegionsSelectProps {
  initRegions: string[]
  onChange: (v: string[]) => void
}

export const RegionsSelect: React.FC<RegionsSelectProps> = ({
  initRegions,
  onChange
}) => {
  const [value, setValue] = useState<RegionValue[]>(() =>
    initRegions.map((r) => ({ label: r, value: r }))
  )

  return (
    <DebounceSelect
      mode='multiple'
      value={value}
      placeholder='Filter by regions'
      fetchOptions={fetchRegionList}
      onChange={(newValue) => {
        setValue(newValue as RegionValue[])
        onChange((newValue as RegionValue[]).map((r) => r.value))
      }}
      style={{ width: 400 }}
    />
  )
}