@props(['disabled' => false, 'label' => null, 'id' => rand(9, 99999), 'group' => false, 'placeholderValue' => ''])

@php
    $uniqId = 'select' . uniqid();
@endphp
<div class="w-full">
    @if ($label)
        <label class="mb-1.5 text-start block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
        </label>
    @endif
    <div class="w-full relative flex gap-2">

        <div class="w-full " x-data="{ choicesInstance: null }" x-init="choicesInstance = new Choices($refs.{{ $uniqId }}, {
            removeItems: true,
            removeItemButton: true,
            shouldSort: false,
            shouldSortItems: false,
            placeholderValue: '{{ $placeholderValue }}'
        });
        choicesInstance.passedElement.element.addEventListener('change', () => {
            $wire.set('{{ $attributes->wire('model')->value() }}', choicesInstance.getValue(true));
        });
        
        $watch('$wire.{{ $attributes->wire('model')->value() }}', value => {
            if (!value) {
                choicesInstance.removeActiveItems();
            }
        });" wire:ignore>
            <select {{ $attributes }} x-ref="{{ $uniqId }}">
                {{ $slot }}
            </select>

            <span
                class="pointer-events-none absolute top-1/2 {{ $group ? 'end-12' : 'end-4' }} z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </span>
        </div>


        @if (data_get($this, $attributes->wire('model')->value()))
            <x-ui.button.ghost wire:loading.attr="disabled" id="copy-button"
                wire:click="$set('{{ $attributes->wire('model')->value() }}', null)"
                class="absolute top-0 bottom-0  {{ $group ? 'end-18' : 'end-10' }} inline-flex z-99 cursor-pointer items-center gap-1  py-3 pr-3 pl-3 text-sm font-medium text-gray-700 dark:border-gray-800 dark:text-gray-400">
                <svg class="fill-current" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z"
                        fill="" />
                </svg>
            </x-ui.button.ghost>
        @endif
        {{ $action ?? null }}
    </div>
    <p class="text-theme-xs mt-1 text-error-500">{{ $errors->first($attributes->get('wire:model')) }}</p>
    
</div>