{{-- 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. --}}

@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"
            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 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>