@props([
    'name',
    'options' => [],
    'selected' => null,
    'placeholder' => 'Search…',
    'required' => false,
    'emptyLabel' => 'Select…',
])

@php
    $optionList = collect($options)->map(function ($option) {
        if (is_array($option)) {
            return [
                'value' => (string) ($option['value'] ?? ''),
                'label' => (string) ($option['label'] ?? ''),
                'search' => (string) ($option['search'] ?? $option['label'] ?? ''),
            ];
        }

        return [
            'value' => (string) data_get($option, 'value', data_get($option, 'id', '')),
            'label' => (string) data_get($option, 'label', data_get($option, 'name', '')),
            'search' => (string) data_get($option, 'search', data_get($option, 'label', data_get($option, 'name', ''))),
        ];
    })->values()->all();

    $selectedValue = old($name, $selected);
    $selectedValue = $selectedValue === null || $selectedValue === '' ? '' : (string) $selectedValue;
@endphp

<div
    class="relative"
    x-data="searchableSelect({
        options: {{ \Illuminate\Support\Js::from($optionList) }},
        selected: {{ \Illuminate\Support\Js::from($selectedValue) }},
        placeholder: {{ \Illuminate\Support\Js::from($placeholder) }},
        emptyLabel: {{ \Illuminate\Support\Js::from($emptyLabel) }},
    })"
    @keydown.escape.window="open = false"
    @click.outside="open = false"
>
    <input type="hidden" name="{{ $name }}" x-model="selected" @if ($required) required @endif {{ $attributes->except(['class']) }}>

    <button
        type="button"
        class="mt-1 flex w-full items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-left text-sm text-slate-900 shadow-sm hover:border-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
        @click="toggle()"
        :aria-expanded="open.toString()"
    >
        <span class="truncate" x-text="selectedLabel()"></span>
        <svg class="ml-2 h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
    </button>

    <div
        x-show="open"
        x-cloak
        x-transition.opacity
        class="absolute z-30 mt-1 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg"
    >
        <div class="border-b border-slate-100 p-2">
            <input
                type="search"
                x-ref="query"
                x-model="query"
                @keydown.enter.prevent="selectFirst()"
                placeholder="{{ $placeholder }}"
                class="w-full rounded-lg border-slate-300 text-sm"
            >
        </div>
        <ul class="max-h-56 overflow-y-auto py-1 text-sm">
            <li>
                <button type="button" class="flex w-full px-3 py-2 text-left text-slate-500 hover:bg-slate-50" @click="choose('')">
                    {{ $emptyLabel }}
                </button>
            </li>
            <template x-for="option in filtered" :key="option.value">
                <li>
                    <button
                        type="button"
                        class="flex w-full px-3 py-2 text-left hover:bg-indigo-50"
                        :class="selected === option.value ? 'bg-indigo-50 font-medium text-indigo-900' : 'text-slate-800'"
                        @click="choose(option.value)"
                        x-text="option.label"
                    ></button>
                </li>
            </template>
            <li x-show="filtered.length === 0" class="px-3 py-2 text-slate-400">No matches</li>
        </ul>
    </div>
</div>