import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { ArrowDown2 } from 'iconsax-react'
import { useState } from 'react'

const value = [
    { id: 1, name: 'تهران' },
    { id: 2, name: 'شیراز' },
    { id: 3, name: 'اصفهان' },
    { id: 4, name: 'اراک' },
    { id: 5, name: 'تبریز' },
]

export const ComboBox = () => {
    const [query, setQuery] = useState('')
    const [selected, setSelected] = useState(value[1])

    const filteredValue =
        query === ''
            ? value
            : value?.filter((value) => {
                return value.name.toLowerCase().includes(query.toLowerCase())
            })

    return (
        <Combobox value={selected} onChange={(value: any) => setSelected(value)} onClose={() => setQuery('')}>
            <div className="relative w-full">
                <ComboboxInput
                    className="input-style"
                    displayValue={(person: any) => person?.name}
                    onChange={(event) => setQuery(event.target.value)}
                />
                <ComboboxButton className="absolute top-0 h-full bg-transparent">
                    <ArrowDown2 className="size-5 absolute left-3 top-5 p-0 text-secondary-text-color/70" />
                </ComboboxButton>
            </div>

            <ComboboxOptions
                anchor="bottom start"
                transition
                className="bg-white shadow min-w-[220px] mt-2 rounded-xl p-2"
            >
                {filteredValue.map((value) => (
                    <ComboboxOption
                        key={value?.id}
                        value={value}
                        className="group flex cursor-default items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-secondary-text-color/10"
                    >
                        <div className="text-sm/6 text-black">{value?.name}</div>
                    </ComboboxOption>
                ))}
            </ComboboxOptions>
        </Combobox>
    )
}