@props([
    'name',
    'id' => null,
    'label' => null,
    'labelledBy' => null,
    'placeholder' => 'Select an option',
    'options' => [],
    'value' => '',
    'required' => false,
    'withFlags' => false,
    'searchable' => false,
    'searchPlaceholder' => 'Search',
])

@php
    $fieldId = $id ?? $name;
    $listId = $fieldId . '-listbox';
    $menuOptions = $options;

    if ($placeholder && ! collect($menuOptions)->contains(fn (array $option): bool => ($option['value'] ?? '') === '')) {
        array_unshift($menuOptions, ['value' => '', 'label' => $placeholder]);
    }

    $selectedOption = collect($menuOptions)->first(
        fn (array $option): bool => (string) ($option['value'] ?? '') === (string) $value,
    );

    $selectedLabel = $selectedOption['label'] ?? $placeholder;
    $selectedFlag = $selectedOption['flag'] ?? null;
    $showFlags = $withFlags || collect($menuOptions)->contains(fn (array $option): bool => ! empty($option['flag']));
@endphp

<div
    id="{{ $fieldId }}"
    {{ $attributes->class(['custom-select', 'custom-select--flags' => $showFlags]) }}
    data-custom-select
    data-placeholder="{{ $placeholder }}"
    @if ($showFlags) data-custom-select-flags @endif
    @if ($searchable) data-custom-select-search @endif
>
    @if ($label)
        <span class="custom-select-label" id="{{ $fieldId }}-label">{{ $label }}</span>
    @endif

    <input
        type="hidden"
        name="{{ $name }}"
        value="{{ $value }}"
        @if ($required) required @endif
    >

    <button
        type="button"
        class="custom-select-trigger"
        id="{{ $fieldId }}-trigger"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="{{ $listId }}"
        @if ($label) aria-labelledby="{{ $fieldId }}-label"
        @elseif ($labelledBy) aria-labelledby="{{ $labelledBy }}"
        @endif
    >
        <span class="custom-select-value-wrap">
            @if ($showFlags)
                <img
                    class="custom-select-flag"
                    src="{{ $selectedFlag ? 'https://flagcdn.com/w40/' . $selectedFlag . '.png' : '' }}"
                    alt=""
                    width="20"
                    height="14"
                    @if (! $selectedFlag) hidden @endif
                >
            @endif
            <span class="custom-select-value {{ $value !== '' && $value !== null ? '' : 'is-placeholder' }}">
                {{ ($value !== '' && $value !== null) ? $selectedLabel : $placeholder }}
            </span>
        </span>
        <span class="custom-select-caret" aria-hidden="true">
            <x-icon name="chevron-down" />
        </span>
    </button>

    <div
        class="custom-select-menu{{ $searchable ? ' custom-select-menu--searchable' : '' }}"
        id="{{ $fieldId }}-menu"
        hidden
    >
        @if ($searchable)
            <div class="custom-select-search">
                <input
                    type="search"
                    class="custom-select-search-input"
                    placeholder="{{ $searchPlaceholder }}"
                    autocomplete="off"
                    aria-label="{{ $searchPlaceholder }}"
                    aria-controls="{{ $listId }}"
                >
            </div>
        @endif

        <ul class="custom-select-options" id="{{ $listId }}" role="listbox" tabindex="-1">
            @foreach ($menuOptions as $option)
                @php
                    $optionValue = (string) ($option['value'] ?? '');
                    $isSelected = (string) $value === $optionValue;
                    $searchTerms = strtolower(trim(implode(' ', array_filter([
                        $option['label'] ?? '',
                        $optionValue,
                        $option['dial'] ?? '',
                    ]))));
                @endphp
                <li
                    role="option"
                    data-value="{{ $optionValue }}"
                    @if ($searchable && $searchTerms !== '') data-search="{{ $searchTerms }}" @endif
                    @if (! empty($option['flag'])) data-flag="{{ $option['flag'] }}" @endif
                    aria-selected="{{ $isSelected ? 'true' : 'false' }}"
                    class="{{ $isSelected ? 'is-selected' : '' }}"
                >
                    @if ($showFlags && ! empty($option['flag']))
                        <img
                            class="custom-select-option-flag"
                            src="https://flagcdn.com/w40/{{ $option['flag'] }}.png"
                            alt=""
                            width="20"
                            height="14"
                            loading="lazy"
                        >
                    @endif
                    <span>{{ $option['label'] }}</span>
                </li>
            @endforeach
        </ul>

        @if ($searchable)
            <p class="custom-select-empty" hidden>No results found</p>
        @endif
    </div>
</div>