{{-- A set of M3 chips: a row that wraps, 8px apart, named for screen readers as a group.

         <x-chip-set label="File types" hint="Show only these" error-field="kinds">
             <x-chip type="filter" label="Photos" value="photos" wire:model.live="kinds" />
             <x-chip type="filter" label="Documents" value="documents" wire:model.live="kinds" />
         </x-chip-set>

     `label` is shown above the row and names the group; without it, pass `aria-label`. `hint`
     sits under it, and a validation message for `error-field` (the property the chips bind, and
     its items: `kinds` and `kinds.*`) replaces the hint.

     `scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a narrow
     screen: the edge it can still scroll towards fades (resources/js/chips.js), and a chip reached
     with Tab scrolls clear of the fade. Removing a focused input chip moves focus within the set.

     The set is one tab stop and the arrow keys move between the chips inside it, with Home and End
     at the ends — M3's chip keyboard table. Backspace and Delete still remove a focused input
     chip. --}}

@props([
    'label' => null,
    'hint' => null,
    'errorField' => null,
    'scroll' => false,
])

@php
    $key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
    $messages = filled($errorField) && isset($errors)
        ? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorField), $errors->get($errorField.'.*')])))
        : [];
    $describedBy = $messages !== [] || filled($hint) ? "material-chip-set-{$key}-hint" : null;
@endphp

<div
    role="group"
    @if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
    @if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
    {{ $attributes->class('min-w-0') }}
>
    @if (filled($label))
        <p id="material-chip-set-{{ $key }}-label" class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</p>
    @endif

    @if ($scroll)
        <div
            data-chip-set
            x-data="materialChipSet"
            x-on:keydown="key($event)"
            x-on:focusin="rove($event.target)"
            wire:ignore.self
            class="-mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
        >
            {{ $slot }}
        </div>
    @else
        <div data-chip-set x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)" class="flex flex-wrap gap-2">
            {{ $slot }}
        </div>
    @endif

    @if ($messages !== [])
        <div id="{{ $describedBy }}">
            @foreach ($messages as $message)
                <p class="mt-1 type-body-sm text-error">{{ $message }}</p>
            @endforeach
        </div>
    @elseif (filled($hint))
        <p id="{{ $describedBy }}" class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
    @endif
</div>