@props([
    'label',
    'data' => [],
    'model',
    'description',
    'error' => '',
    'disabled' => false,
    'searchable' => false,
    'placeholder' => 'Pilih opsi...',
    'required' => false,
    'name' => '',
    'value' => '',
])

@php
    $defaultClass =
        'w-full border border-gray-300 bg-gray-100 rounded p-2 text-left text-black/60 group-focus:text-gray-300';

    $singleSelectRef = App\Helpers\Reference::generate('singleSelect');
@endphp

<x-stack
    class="w-full mt-2 gap-1"
    x-data="{
        focus: false,
        isDropdownOpen: false,
        selectedValue: null,
        selectedName: null,
        search: '',
        data: {{ json_encode($data) }},
        items: {{ json_encode($data) }},
        closeDropdown() {
            this.isDropdownOpen = false
        },
        toggleDropdown() {
            this.isDropdownOpen = !this.isDropdownOpen
        },
        clear() {
            this.selectedValue = null
            this.selectedName = null
        },
        selectItem(value) {
            if (this.selectedValue === value)
                return this.clear()

            this.selectedValue = value
            this.selectedName = this.data.find((item) => item.value === value).label
            $refs.selectElRef.selected = value
            $refs.selectElRef.value = value
            $refs.selectElRef.dispatchEvent(new Event('change'))
        },
    }"
    x-init="() => {
        $watch('search', (value) => {
            if (value) {
                data = items.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
            } else {
                data = items
            }
        })
    }"
>
    @isset($label)
        <label
            class="font-semibold {{ $disabled ? 'text-gray-100/90' : '' }}"
            x-bind:class="focus ? 'text-primary' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}

            @if ($required)
                <span class="text-red-300">*</span>
            @endif

        </label>
    @endisset

    @isset($description)
        <span class="text-xs text-black/50">{{ $description }}</span>
    @endisset

    {{-- Core --}}
    <div
        class="Multi-Select-Wrapper relative min-w-full w-0 h-full"
        x-on:keydown.escape.window="closeDropdown()"
        x-on:click.outside="closeDropdown()"
    >
        <select
            class="hidden"
            x-ref="selectElRef"
            {{ $attributes->except(['class', 'label']) }}
        >
            {{-- <template
                x-for="(item, index) in data"
            > --}}
            @foreach ($data as $item)
                <option
                    :key="index"
                    x-data="{
                        value: {{ json_encode($item['value']) }},
                        label: {{ json_encode($item['label']) }}
                    }"
                    x-bind:selected="selectedValue === value"
                    x-bind:value="value"
                >
                    {{ $item['label'] }}
                </option>
            @endforeach
            {{-- </template> --}}
        </select>

        <button
            class="{{ $defaultClass }}"
            x-data="{ focus: false }"
            x-on:focus="focus = true"
            x-on:blur="focus = false"
            @if ($disabled) disabled @endif
            x-on:click="toggleDropdown()"
            style="min-height: 2.6rem;"
            type="button"
            @isset($model)
            x-bind:value="{{ $model }}"
            x-ref="singleSelectButtonRef"
            x-init="() => {
                if (!$refs.singleSelectButtonRef.value) {
                    return
                }

                initialValue = $refs.singleSelectButtonRef.value
                selectItem(initialValue)
                {{-- {!! $model !!} = initialValue --}}
            }"
            @endisset
        >
            <template x-if="selectedName !== null">
                <x-text
                    class="text-black"
                    x-text="selectedName"
                />
            </template>

            <span x-text="selectedName !== null ? '' : '{{ $placeholder }}'"></span>
        </button>

        <i
            class="absolute translate-y-1/2 my-1 -top-[10px] right-10 ph-bold ph-trash text-lg text-red-300 hover:cursor-pointer hover:text-red-300/70"
            x-bind:class="{ 'hidden': selectedValue === null }"
            x-on:click="clear()"
        ></i>

        <i
            class="absolute translate-y-1/2 my-1 top-0 right-0 items-center mx-3 ph-bold pointer-events-none hover:cursor-pointer {{ $disabled ? 'text-gray-300' : 'text-primary-100' }}"
            x-bind:class="{ 'ph-caret-up': isDropdownOpen, 'ph-caret-down': !isDropdownOpen }"
        ></i>

        <template x-if="isDropdownOpen">

            <ul
                class="w-full max-h-[16rem] absolute z-10 rounded-lg bg-white border-[1.5px] border-primary-100 overflow-x-hiddens overflow-y-auto shadow-lg ">

                <template x-if="items.length > 0">
                    <input
                        type="text"
                        x-model="search"
                        class="w-full border-gray-300/40 p-2 focus:border-transparent focus:ring-gray-300 focus:ring-2 bg-white focus:bg-white focus:text-black"
                        placeholder="Cari..."
                        autocomplete="one-time-code"
                        autofocus="autofocus"
                    />
                </template>

                <template x-if="data.length === 0 && search.length > 0">
                    <li class="p-2 text-black/60">Tidak terdapat data yang sesuai.</li>
                </template>

                <template
                    x-for="(item, index) in data"
                    :key="index"
                >
                    <li
                        class="border border-gray-300/40 p-1 cursor-pointer hover:bg-primary-100/60 hover:text-white "
                        x-on:click="selectItem(item.value)"
                    >
                        <x-group class="items-center space-x-4">
                            <i
                                class="ph-bold ph-check text-primary-100"
                                x-bind:class="{ 'hidden': item.value !== selectedValue }"
                            ></i>
                            <span x-text="item.label"></span>
                        </x-group>
                    </li>
                </template>
            </ul>
        </template>
    </div>

    @if (isset($error) && strlen($error) > 1)
        <span class="text-xs text-danger-300/80 my-1">{{ $error }}</span>
    @endif

</x-stack>