Combobox

'use client'

import { useId, useState } from 'react'

import { CheckIcon, ChevronDownIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

const countries = [
  { value: '1', label: 'India', flag: 'https://cdn.21st.dev/assets/mirror/57/5784730cb797110eca99d0f52f7adfe2c5b24597027701e506c00382560e0008.png' },
  { value: '2', label: 'China', flag: 'https://cdn.21st.dev/assets/mirror/7f/7f3a8c8e120046482aa86e6e15f3cddeb50dd33d4d9e703fdeeea26223f2ef08.png' },
  { value: '3', label: 'Monaco', flag: 'https://cdn.21st.dev/assets/mirror/ce/ce22402297523848c6f3a2e6800e73a0ff870e36251c2ca57838bd2a98c531c3.png' },
  { value: '4', label: 'Serbia', flag: 'https://cdn.21st.dev/assets/mirror/6a/6a1a5db364366b224d52b045251fd08c3c5e9801d74ab41644f4afda2a63e397.png' },
  { value: '5', label: 'Romania', flag: 'https://cdn.21st.dev/assets/mirror/f9/f9a0b715ca5d02c4c7dd6d52b410f2eba21da73e9eeafeba8ab69fc5ea6c0deb.png' },
  { value: '6', label: 'Mayotte', flag: 'https://cdn.21st.dev/assets/mirror/81/81872b9c13db9d7a3567969955eebd72a3e2f7661f36c666da0913b0d17bd8d4.png' },
  { value: '7', label: 'Iraq', flag: 'https://cdn.21st.dev/assets/mirror/0b/0bc282a106acc3cb98183f24c5af3adb048ab45ce3145ae625b67777d4c821eb.png' },
  { value: '8', label: 'Syria', flag: 'https://cdn.21st.dev/assets/mirror/d5/d54e1011089682acd2cba94cba0fd9c15719b49b5d319554164ece64bed03f74.png' },
  { value: '9', label: 'Korea', flag: 'https://cdn.21st.dev/assets/mirror/14/1452b3432be9f2dbcbb7b36b7c399a9ac65ed731950cc783920bda9ba5cfe77c.png' },
  { value: '10', label: 'Zimbabwe', flag: 'https://cdn.21st.dev/assets/mirror/92/92c4c12ba5d47eeda2fdf53f2ce2d7bf6b00004d42ec75919b6c977e911b6a2c.png' }
]

const ComboboxCountryFlagDemo = () => {
  const id = useId()
  const [open, setOpen] = useState<boolean>(false)
  const [value, setValue] = useState<string>('')

  return (
    <div className='w-full max-w-xs space-y-2'>
      <Label htmlFor={id}>Options with flag and search</Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            id={id}
            variant='outline'
            role='combobox'
            aria-expanded={open}
            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
          >
            {value ? (
              <span className='flex min-w-0 items-center gap-2'>
                <img src={countries.find(item => item.label === value)?.flag} alt={value} className='h-4 w-5' />
                <span className='truncate'>{value}</span>
              </span>
            ) : (
              <span className='text-muted-foreground'>Select country</span>
            )}
            <ChevronDownIcon size={16} className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
          </Button>
        </PopoverTrigger>
        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
          <Command>
            <CommandInput placeholder='Search country...' />
            <CommandList>
              <CommandEmpty>No country found.</CommandEmpty>
              {countries.map(country => (
                <CommandItem
                  key={country.value}
                  value={country.label}
                  onSelect={currentValue => {
                    setValue(currentValue)
                    setOpen(false)
                  }}
                >
                  <img src={country.flag} alt={`${country.label} flag`} className='h-4 w-5' />
                  {country.label}
                  {value === country.value && <CheckIcon size={16} className='ml-auto' />}
                </CommandItem>
              ))}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}

export default ComboboxCountryFlagDemo