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


@php
    $uniqId = 'select' . uniqid();
@endphp
<div class="w-full relative" wire:ignore x-data x-init="$nextTick(() => {
    const choices = new Choices($refs.{{ $uniqId }}, {
        removeItems: true,
        removeItemButton: true,
        placeholderValue: '{{ $placeholderValue }}',
        callbackOnCreateTemplates: function(strToEl, escapeForTemplate, getClassNames) {
            return {
                item: ({ classNames }, data) => {
                    return strToEl(`
          <div class='${getClassNames(classNames.item).join(' ')} ${
          getClassNames(data.highlighted
            ? classNames.highlightedState
            : classNames.itemSelectable).join(' ')
        } ${
          data.placeholder ? classNames.placeholder : ''
        }' data-item data-id='${data.id}' data-value='${(data.value)}' ${
          data.active ? 'aria-selected=true data-deletable' : ''
        } ${data.disabled ? 'aria-disabled=true' : ''} >
            <span class='me-2 fi fi-` + data.value + `'></span> ` + (data.label) + `
            <button type='button' class='choices__button' data-button>Remove item</button>
          </div>
        `);
                },
                choice: ({ classNames }, data) => {
                    return strToEl(`
          <div class='${getClassNames(classNames.item).join(' ')} ${getClassNames(classNames.itemChoice).join(' ')} ${
          getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable).join(' ')
        }' data-select-text='${this.config.itemSelectText}'
        data-choice ${
          data.disabled
            ? 'data-choice-disabled aria-disabled=true'
            : 'data-choice-selectable'
        }
        data-id='${data.id}' data-value='` + (data.value) + `' ${
          data.groupId > 0 ? 'role=treeitem' : 'role=option'
        }>
            <span class='me-2 fi fi-` + data.value + `'></span> ` + (data.label) + `
          </div>
        `);
                },
            };
        },

    });

    choices.passedElement.element.addEventListener('change', () => {
        const values = choices.getValue(true);
        @this.set('{{ $model }}', values);
    });
})">


    <select {{ $attributes->merge(['class' => '']) }} x-ref="{{ $uniqId }}">
        {{ $slot }}
    </select>
    <span
        class="pointer-events-none absolute top-1/2 {{ $group ? 'right-12' : 'right-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>