@props([
    'options' => [],
    'placeholder' => __('Select'),
    'emptyLabel' => __('No results'),
    'method' => null,
    'params' => [],
])

<div
    x-data="{
        open: false,
        query: '',
        options: @js($options),
        params: @js($params),
        method: @js($method),
        get filteredOptions() {
            const query = this.query.trim().toLowerCase();

            return Object.entries(this.options).filter(([id, label]) => {
                const text = String(label ?? '').toLowerCase();
                return query === '' || text.includes(query) || String(id).toLowerCase().includes(query);
            });
        },
        choose(id) {
            if (this.method) {
                this.$wire.call(this.method, ...this.params, id);
            }

            this.open = false;
            this.query = '';
        }
    }"
    class="relative w-full"
>
    <button
        type="button"
        @click="open = !open; if (open) $nextTick(() => $refs.search?.focus())"
        class="w-full border rounded px-2 py-1 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 flex items-center justify-between gap-2 text-start text-xs"
    >
        <span class="truncate">{{ $placeholder }}</span>
        <i class="fas fa-chevron-down text-[10px] text-gray-500 dark:text-gray-300"></i>
    </button>

    <div
        x-show="open"
        x-transition
        @click.outside="open = false"
        style="display: none;"
        class="absolute z-30 mt-1 w-56 bg-white dark:bg-gray-800 border dark:border-gray-600 rounded shadow-lg"
    >
        <input
            x-ref="search"
            type="text"
            x-model="query"
            placeholder="{{ __('Search') }}"
            class="w-full border-b px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none"
        />

        <div class="max-h-56 overflow-y-auto">
            <template x-for="([id, label]) in filteredOptions" :key="id">
                <button
                    type="button"
                    @click="choose(id)"
                    class="w-full text-start px-3 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 flex items-center justify-between gap-2"
                >
                    <span class="truncate" x-text="label"></span>
                </button>
            </template>

            <div x-show="filteredOptions.length === 0" class="px-3 py-2 text-gray-500 dark:text-gray-400">
                {{ $emptyLabel }}
            </div>
        </div>
    </div>
</div>