<script setup lang="ts">
import { Check, ChevronsUpDown } from 'lucide-vue-next'
import { computed, ref } from 'vue'

import { cn } from '@/lib/utils'

const modelValue = defineModel<string>()

const open = ref(false)

const countries = [
  { code: 'CN', name: '中国', flag: '🇨🇳' },
  { code: 'US', name: '美国', flag: '🇺🇸' },
  { code: 'JP', name: '日本', flag: '🇯🇵' },
  { code: 'KR', name: '韩国', flag: '🇰🇷' },
  { code: 'GB', name: '英国', flag: '🇬🇧' },
  { code: 'DE', name: '德国', flag: '🇩🇪' },
  { code: 'FR', name: '法国', flag: '🇫🇷' },
  { code: 'IT', name: '意大利', flag: '🇮🇹' },
  { code: 'ES', name: '西班牙', flag: '🇪🇸' },
  { code: 'RU', name: '俄罗斯', flag: '🇷🇺' },
  { code: 'CA', name: '加拿大', flag: '🇨🇦' },
  { code: 'AU', name: '澳大利亚', flag: '🇦🇺' },
  { code: 'BR', name: '巴西', flag: '🇧🇷' },
  { code: 'IN', name: '印度', flag: '🇮🇳' },
  { code: 'MX', name: '墨西哥', flag: '🇲🇽' },
  { code: 'NL', name: '荷兰', flag: '🇳🇱' },
  { code: 'SG', name: '新加坡', flag: '🇸🇬' },
  { code: 'HK', name: '中国香港', flag: '🇭🇰' },
  { code: 'TW', name: '中国台湾', flag: '🇹🇼' },
  { code: 'TH', name: '泰国', flag: '🇹🇭' },
  { code: 'VN', name: '越南', flag: '🇻🇳' },
  { code: 'MY', name: '马来西亚', flag: '🇲🇾' },
  { code: 'ID', name: '印度尼西亚', flag: '🇮🇩' },
  { code: 'PH', name: '菲律宾', flag: '🇵🇭' },
  { code: 'AE', name: '阿联酋', flag: '🇦🇪' },
  { code: 'SA', name: '沙特阿拉伯', flag: '🇸🇦' },
  { code: 'TR', name: '土耳其', flag: '🇹🇷' },
  { code: 'PL', name: '波兰', flag: '🇵🇱' },
  { code: 'SE', name: '瑞典', flag: '🇸🇪' },
  { code: 'CH', name: '瑞士', flag: '🇨🇭' },
  { code: 'AT', name: '奥地利', flag: '🇦🇹' },
  { code: 'BE', name: '比利时', flag: '🇧🇪' },
  { code: 'DK', name: '丹麦', flag: '🇩🇰' },
  { code: 'FI', name: '芬兰', flag: '🇫🇮' },
  { code: 'NO', name: '挪威', flag: '🇳🇴' },
  { code: 'IE', name: '爱尔兰', flag: '🇮🇪' },
  { code: 'PT', name: '葡萄牙', flag: '🇵🇹' },
  { code: 'CZ', name: '捷克', flag: '🇨🇿' },
  { code: 'RO', name: '罗马尼亚', flag: '🇷🇴' },
  { code: 'HU', name: '匈牙利', flag: '🇭🇺' },
  { code: 'IL', name: '以色列', flag: '🇮🇱' },
  { code: 'ZA', name: '南非', flag: '🇿🇦' },
  { code: 'EG', name: '埃及', flag: '🇪🇬' },
  { code: 'NG', name: '尼日利亚', flag: '🇳🇬' },
  { code: 'AR', name: '阿根廷', flag: '🇦🇷' },
  { code: 'CL', name: '智利', flag: '🇨🇱' },
  { code: 'CO', name: '哥伦比亚', flag: '🇨🇴' },
  { code: 'PE', name: '秘鲁', flag: '🇵🇪' },
  { code: 'NZ', name: '新西兰', flag: '🇳🇿' },
]

const selectedCountry = computed(() => {
  return countries.find(c => c.code === modelValue.value)
})

function filterFunction(list: typeof countries, term: string) {
  return list.filter(country =>
    country.name.toLowerCase().includes(term.toLowerCase())
    || country.code.toLowerCase().includes(term.toLowerCase()),
  )
}

function selectCountry(code: string) {
  modelValue.value = code
  open.value = false
}
</script>

<template>
  <UiPopover v-model:open="open">
    <UiPopoverTrigger as-child>
      <button
        type="button"
        role="combobox"
        :aria-expanded="open"
        :aria-label="selectedCountry ? selectedCountry.name : '选择国家或地区'"
        class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
      >
        <span v-if="selectedCountry" class="flex items-center gap-2 truncate">
          <span>{{ selectedCountry.flag }}</span>
          <span>{{ selectedCountry.name }}</span>
          <span class="text-muted-foreground text-xs">({{ selectedCountry.code }})</span>
        </span>
        <span v-else class="text-muted-foreground">选择国家或地区</span>
        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
      </button>
    </UiPopoverTrigger>
    <UiPopoverContent class="w-[300px] p-0" align="start">
      <UiCommand :filter-function="filterFunction as any">
        <UiCommandInput placeholder="搜索国家或地区..." />
        <UiCommandList>
          <UiCommandEmpty>
            未找到匹配的国家或地区
          </UiCommandEmpty>
          <UiCommandGroup>
            <UiCommandItem
              v-for="country in countries"
              :key="country.code"
              :value="country"
              class="cursor-pointer"
              @select="selectCountry(country.code)"
            >
              <div
                :class="cn(
                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                  modelValue === country.code
                    ? 'bg-primary text-primary-foreground'
                    : 'opacity-50',
                )"
              >
                <Check
                  v-if="modelValue === country.code"
                  class="h-3 w-3"
                />
              </div>
              <span class="flex items-center gap-2">
                <span>{{ country.flag }}</span>
                <span>{{ country.name }}</span>
                <span class="text-muted-foreground text-xs">({{ country.code }})</span>
              </span>
            </UiCommandItem>
          </UiCommandGroup>
        </UiCommandList>
      </UiCommand>
    </UiPopoverContent>
  </UiPopover>
</template>
