{{-- A select: the native `<select>`, drawn as M3's exposed dropdown menu.

     Native on purpose: the keyboard, type-to-find, the screen reader and the form value are the
     browser's, and `wire:model` binds to it as to any select. Where the browser has the
     customizable select (`appearance: base-select`) its open list is M3's menu, under the field
     and as wide (resources/css/components/menu.css); elsewhere the native list stands in. So the
     options stay plain text: the native list could show nothing more. A select always shows a
     value, so its label always floats.

     `options` as a list of `['id' => …, 'name' => …]` (`'disabled' => true` greys one out),
     `option-value` and `option-label` to read other keys, and a `placeholder` that becomes the
     first option, valued `placeholder-value` (empty by default). Or pass `<option>`s in the slot.
     `label`, `hint`, `icon`, `variant`, `size`; `full` takes the 40rem bound off a field its container already bounds. `class` and `style` land on the field's root, every
     other attribute on the `<select>`. A value too long for the field ends before the arrow with
     an ellipsis. The field's root carries `data-md-select`; what a select changes in the field's
     chrome is resources/css/components/select.css. --}}

@props([
    'label' => null,
    'hint' => null,
    'hintClass' => null,
    'icon' => null,
    'options' => [],
    'optionValue' => 'id',
    'optionLabel' => 'name',
    'placeholder' => null,
    'placeholderValue' => null,
    'size' => 'md',
    'variant' => null,
    'full' => false,
])

@php
    $model = $attributes->whereStartsWith('wire:model')->first();
    $id = $attributes->get('id') ?? 'field-'.substr(md5($model.'|'.$label.'|select'), 0, 12);
    $field = \NoNameWeb\LivewireMaterial\Support\Field::class;
    $errorKey = $field::key($model, $attributes->get('name'));
    $messages = $field::messages($errors ?? null, $errorKey);
    $fieldIconSize = ['sm' => 20, 'xs' => 16][$size] ?? 24;
@endphp

<x-livewire-material::field :$id :$label :$hint :hint-class="$hintClass" :$messages :$icon :$size :$variant :$full floated :class="$attributes->get('class')" :style="$attributes->get('style')" data-md-select>
    <select
        {{ $attributes->except(['class', 'style', 'id']) }}
        id="{{ $id }}"
        @if ($messages !== []) aria-invalid="true" @endif
        @if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
        data-md-field-control
    >
        {{-- The customizable select draws the chosen option in `<selectedcontent>`, which select.css
             cuts with an ellipsis before the arrow; a browser without it never renders the button.
             `wire:ignore`, because the browser fills it: a render would put back the first option's
             label, parsed from the server's HTML, or nothing. --}}
        <button type="button" wire:ignore><selectedcontent></selectedcontent></button>

        @if (filled($placeholder))
            <option value="{{ $placeholderValue }}">{{ $placeholder }}</option>
        @endif

        @foreach ($options as $option)
            <option value="{{ data_get($option, $optionValue) }}" @disabled(data_get($option, 'disabled'))>{{ data_get($option, $optionLabel) }}</option>
        @endforeach

        {{ $slot }}
    </select>

    <x-slot:trailing>
        <x-livewire-material::icon name="arrow_drop_down" :size="$fieldIconSize" data-md-field-trailing data-md-field-arrow />
    </x-slot:trailing>
</x-livewire-material::field>