@props([
    'id',
    'name',
    'options' => [],
    'value' => null,
    'placeholder' => null,
    'disabled' => false,
    'required' => false,
    'selectAttributes' => [],
    'triggerIcon' => null,
    'triggerPrefix' => null,
    'maxHeight' => null,
])

@php
    $placeholder = $placeholder ?? __('kview-ui-core::ui.common.select');
    $selectAttributeBag = new \Illuminate\View\ComponentAttributeBag($selectAttributes);
    $selectedValue = (string) old($name, $value ?? '');
    $normalizedOptions = collect($options)
        ->map(function ($option, $key) {
            if (is_array($option)) {
                $value = (string) ($option['value'] ?? (is_string($key) ? $key : ($option['label'] ?? '')));

                return [
                    'value' => $value,
                    'label' => (string) ($option['label'] ?? $value),
                    'meta' => $option['meta'] ?? null,
                    'icon' => $option['icon'] ?? null,
                    'disabled' => (bool) ($option['disabled'] ?? false),
                ];
            }

            $value = is_string($key) ? (string) $key : (string) $option;

            return [
                'value' => $value,
                'label' => (string) $option,
                'meta' => null,
                'icon' => null,
                'disabled' => false,
            ];
        })
        ->values();
    $selectedOption = $normalizedOptions->firstWhere('value', $selectedValue);
    $selectedLabel = $selectedOption['label'] ?? $placeholder;
    $menuId = $id.'_menu';
@endphp

<div
    {{ $attributes->class('ui-dropdown')->merge(['data-ui-dropdown' => true]) }}
    @if ($maxHeight) data-ui-dropdown-max-height="{{ (int) $maxHeight }}" @endif
>
    <select
        {{ $selectAttributeBag->class('ui-dropdown-native')->merge([
            'id' => $id,
            'name' => $name,
            'data-ui-dropdown-native' => true,
            'tabindex' => '-1',
            'aria-hidden' => 'true',
        ]) }}
        @disabled($disabled)
        @required($required)
    >
        @if ($placeholder !== '')
            <option value="" @selected($selectedValue === '')>{{ $placeholder }}</option>
        @endif

        @foreach ($normalizedOptions as $option)
            <option value="{{ $option['value'] }}" @selected($selectedValue === $option['value']) @disabled($option['disabled'])>
                {{ $option['label'] }}
            </option>
        @endforeach
    </select>

    <button
        type="button"
        class="ui-dropdown-trigger"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="{{ $menuId }}"
        data-ui-dropdown-trigger
        @disabled($disabled)
    >
        @if ($triggerIcon)
            <x-ui.icon :name="$triggerIcon" size="17" class="ui-dropdown-trigger-icon" />
        @endif
        <span class="ui-dropdown-trigger-copy">
            @if ($triggerPrefix)
                <span class="ui-dropdown-trigger-prefix">{{ $triggerPrefix }}</span>
            @endif
            <span class="ui-dropdown-trigger-label" data-ui-dropdown-label>{{ $selectedLabel }}</span>
        </span>
        <x-ui.icon name="chevron-down" size="16" class="ui-dropdown-chevron" />
    </button>

    <div id="{{ $menuId }}" class="ui-dropdown-menu ui-scrollbar" role="listbox" tabindex="-1" hidden data-ui-dropdown-menu>
        @foreach ($normalizedOptions as $option)
            @php
                $isSelected = $selectedValue === $option['value'];
            @endphp

            <button
                type="button"
                @class(['ui-dropdown-option', 'is-selected' => $isSelected])
                role="option"
                aria-selected="{{ $isSelected ? 'true' : 'false' }}"
                data-ui-dropdown-option
                data-value="{{ $option['value'] }}"
                data-label="{{ $option['label'] }}"
                @disabled($option['disabled'])
            >
                <span class="ui-dropdown-option-main">
                    @if ($option['icon'])
                        <x-ui.icon :name="$option['icon']" size="16" class="ui-dropdown-option-icon" />
                    @endif
                    <span class="ui-dropdown-option-copy">
                        <span>{{ $option['label'] }}</span>
                        @if ($option['meta'])
                            <small>{{ $option['meta'] }}</small>
                        @endif
                    </span>
                </span>
                <x-ui.icon name="check" size="15" class="ui-dropdown-option-check" />
            </button>
        @endforeach
    </div>
</div>