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

<div
    x-data="{
        open: false,
        query: '',
        value: @entangle($attributes->wire('model')),
        options: @js($options),
        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);
            });
        },
        get selectedLabel() {
            const hasValue = this.value !== null && this.value !== undefined && String(this.value) !== '';
            return hasValue && this.options[String(this.value)] ? this.options[String(this.value)] : @js($placeholder);
        },
        choose(id) {
            this.value = id;
            this.open = false;
            this.query = '';
        },
        clear() {
            this.value = '';
            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-3 py-2 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 flex items-center justify-between gap-2 text-start"
        {{ $attributes->whereDoesntStartWith('wire:model') }}
    >
        <span class="truncate" x-text="selectedLabel"></span>
        <i class="fas fa-chevron-down text-xs 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-full 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">
            <button
                type="button"
                @click="clear"
                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"
            >
                {{ $placeholder }}
            </button>

            <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"
                    :class="{'bg-blue-50 dark:bg-gray-700': String(value) === String(id)}"
                >
                    <span class="truncate" x-text="label"></span>
                    <i x-show="String(value) === String(id)" class="fas fa-check text-xs text-blue-600 dark:text-blue-300"></i>
                </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>