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

type Props = {
    field?: any
    placeholder?: string
    className?: string,
    data?: ComboBoxItems[] | []
}

export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [] }) => {
    const [query, setQuery] = useState('')

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

    return (
        <Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')} disabled={data?.length <= 0}>
            <div className="relative w-full">
                <ComboboxInput
                    placeholder={placeholder}
                    className={`input-style min-w-full ${className}`}
                    displayValue={(person: any) => person?.name}
                    onChange={(event) => setQuery(event.target.value)}
                    ref={field && field.ref}
                    name={field && field.name}
                    onBlur={field && field.onBlur}
                />
                <ComboboxButton className="absolute top-0 min-w-full h-full bg-transparent">
                    <ArrowDown2 className="size-5 absolute left-5 top-5 p-0 text-secondary-text-color/70" />
                </ComboboxButton>
            </div>
            {data?.length > 0 && <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>
    )
}