{{-- An M3 chip — assist, filter, input or suggestion — in one component, picked by `type`.

         <x-chip label="Add to calendar" icon="event" wire:click="addToCalendar" />
         <x-chip type="filter" label="Photos" value="photos" wire:model.live="kinds" />
         <x-chip type="input" label="anna@example.com" avatar="AM" removable wire:remove="removeRecipient(3)" wire:key="recipient-3" />
         <x-chip type="suggestion" label="Sounds good" wire:click="reply('Sounds good')" />

     `assist` (the default) is an action: a button, or an anchor with `link` (`wire:navigate` unless
     `external` or `no-wire-navigate`; `disabled` works on a link too, as `aria-disabled`). Its icons
     are primary. `suggestion` is the same in on-surface-variant, for a suggested reply or query.

     `filter` is a toggle. With `wire:model`, `x-model` or `name` it is a native checkbox under the
     chip, so Livewire and Alpine bind it as they bind any checkbox — to a boolean, or to an array
     with `value` for a multi-select set — and a form submits it; `selected` is then only the
     initial state without a model. Without any of them it is a toggle button whose `selected`
     (`aria-pressed`) the caller owns, flipped by its own `wire:click`. Selected, it takes
     secondary-container and a check that grows in at the start; with an `icon`, the check takes the
     icon's place.

     `input` is something a person entered: `avatar` (an image URL, or initials) or `icon` at the
     start, `selected`, and `removable` for a trailing remove button named "Remove <label>". Removing
     calls `wire:remove` (a Livewire action) or `remove` (an Alpine expression); with neither, the
     chip takes itself off the page, hidden `name`/`value` input and all. Backspace or Delete on a
     focused chip removes it too, and focus moves to the previous (Backspace) or next (Delete) chip.
     The chip is a button only when it has something of its own to do (`wire:click`, `x-on:click`,
     `link`, `selected`); otherwise the remove button is its one stop. Give a removable chip in a
     Livewire loop a `wire:key`.

     `elevated` draws assist, filter and suggestion chips on surface-container-low at elevation 1
     instead of the outline; input chips are flat only, as in M3. `tooltip` attaches a plain tooltip.

     Attributes: on a filter checkbox and an input chip, `class`, `style` and `wire:key` stay on the
     chip and every other attribute goes to the control inside (the checkbox, or the chip's button).

     Values from androidx Compose Material 3 (Chip.kt, AssistChipTokens, FilterChipTokens,
     InputChipTokens, SuggestionChipTokens at androidx/androidx 27cf9a7, Apache-2.0): 32px tall,
     small corner, label-large, 18px icons, 24px avatar; 16px padding beside a label, 8px beside an
     icon, 8px between (an input chip: 12px, 8px, 4px beside an avatar). The check grows in on the
     fast spatial spring and fades in on the slow effects one; it shrinks on default effects and
     fades on fast effects, as AnimatingChipContent does. --}}

@props([
    'type' => 'assist',
    'label' => null,
    'icon' => null,
    'iconRight' => null,
    'avatar' => null,
    'elevated' => false,
    'selected' => null,
    'removable' => false,
    'remove' => null,
    'link' => null,
    'external' => false,
    'noWireNavigate' => false,
    'disabled' => false,
    'name' => null,
    'value' => null,
    'tooltip' => null,
])

@php
    $kind = in_array($type, ['assist', 'filter', 'input', 'suggestion'], true) ? $type : 'assist';
    $text = $label ?? trim(strip_tags((string) $slot));
    $isLink = filled($link) && $kind !== 'filter';
    $inert = $disabled && $isLink;
    $raised = $elevated && $kind !== 'input';
    $initials = filled($avatar) && ! str_contains((string) $avatar, '/') && ! str_contains((string) $avatar, '.');
    $anchor = $tooltip !== null ? '--material-chip-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;

    // A filter chip is a native checkbox whenever something binds or submits it.
    $checkbox = $kind === 'filter' && ($attributes->whereStartsWith(['wire:model', 'x-model'])->isNotEmpty() || filled($name));
    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $checked = (bool) $selected;

    // Rendered as the bound property already says, so nothing flips (and animates) once Livewire starts.
    if ($checkbox && $wireModel !== null && ($component = \Livewire\Livewire::current()) !== null) {
        $bound = data_get($component, $wireModel);
        $checked = is_array($bound)
            ? in_array((string) $value, array_map(fn ($item): string => is_scalar($item) ? (string) $item : '', $bound), true)
            : (bool) $bound;
    }

    $wireRemove = $attributes->get('wire:remove');
    $attributes = $attributes->except(['wire:remove']);

    $outer = ['class', 'style', 'wire:key'];

    // Compose draws the 1px border inside the chip; a CSS border takes room, so the padding
    // beside it is 1px short of the token (7px for 8, 15px for 16).

    $base = 'group/chip inline-flex h-8 max-w-full shrink-0 select-none items-center whitespace-nowrap rounded-corner-sm border type-label-lg transition-[background-color,border-color,color,box-shadow] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast';
    // Below 48px the touch target reaches past the chip, as M3 requires.
    $target = 'after:absolute after:inset-x-0 after:top-1/2 after:h-12 after:-translate-y-1/2';

    // Every colour class written out whole, so Tailwind compiles it. Selected is a state the browser
    // owns on a filter chip (a checked checkbox, or aria-pressed), so it is written as a variant.
    $colours = match (true) {
        $kind === 'filter' && $raised && $disabled => 'border-transparent bg-on-surface/12 text-on-surface/38',
        $kind === 'filter' && $raised => 'border-transparent bg-surface-container-low text-on-surface-variant shadow-elevation-1 hover:shadow-elevation-2 has-checked:bg-secondary-container has-checked:text-on-secondary-container aria-pressed:bg-secondary-container aria-pressed:text-on-secondary-container',
        $kind === 'filter' && $disabled => 'border-on-surface/12 text-on-surface/38 has-checked:border-transparent has-checked:bg-on-surface/12 aria-pressed:border-transparent aria-pressed:bg-on-surface/12',
        $kind === 'filter' => 'border-outline-variant text-on-surface-variant focus-visible:border-on-surface-variant has-focus-visible:border-on-surface-variant has-checked:border-transparent has-checked:bg-secondary-container has-checked:text-on-secondary-container hover:has-checked:shadow-elevation-1 aria-pressed:border-transparent aria-pressed:bg-secondary-container aria-pressed:text-on-secondary-container hover:aria-pressed:shadow-elevation-1',
        $kind === 'input' && $disabled => $selected ? 'border-transparent bg-on-surface/12 text-on-surface/38' : 'border-on-surface/12 text-on-surface/38',
        $kind === 'input' => $selected ? 'border-transparent bg-secondary-container text-on-secondary-container' : 'border-outline-variant text-on-surface-variant has-[[data-chip-action]:focus-visible]:border-on-surface-variant',
        $raised && $disabled => 'border-transparent bg-on-surface/12 text-on-surface/38',
        $raised => $kind === 'suggestion'
            ? 'border-transparent bg-surface-container-low text-on-surface-variant shadow-elevation-1 hover:shadow-elevation-2'
            : 'border-transparent bg-surface-container-low text-on-surface shadow-elevation-1 hover:shadow-elevation-2',
        $disabled => 'border-on-surface/12 text-on-surface/38',
        default => $kind === 'suggestion'
            ? 'border-outline-variant text-on-surface-variant focus-visible:border-on-surface-variant'
            : 'border-outline-variant text-on-surface focus-visible:border-on-surface',
    };

    // Leading icons: primary on assist, suggestion and filter chips; on-surface-variant on an input
    // chip, primary while it is hovered, focused or pressed, and primary on a selected one.
    $clicks = $attributes->whereStartsWith(['wire:click', 'x-on:click', '@click'])->isNotEmpty();
    $leadingInk = match (true) {
        $disabled => null,
        $kind !== 'input', (bool) $selected => 'text-primary',
        $isLink || $clicks => 'transition-colors duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-hover/chip:text-primary group-active/chip:text-primary group-has-focus-visible/chip:text-primary',
        default => null,
    };
    $trailingInk = in_array($kind, ['assist', 'suggestion'], true) && ! $disabled ? 'text-primary' : null;

    $check = 'size-4.5 opacity-0 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-100 group-has-checked/chip:duration-(--md-sys-motion-effects-slow-duration) group-has-checked/chip:ease-effects-slow group-aria-pressed/chip:opacity-100 group-aria-pressed/chip:duration-(--md-sys-motion-effects-slow-duration) group-aria-pressed/chip:ease-effects-slow';

    if ($kind === 'input') {
        $actionTag = match (true) {
            $isLink => 'a',
            $clicks || $selected !== null => 'button',
            default => 'span',
        };
        $interactive = $actionTag !== 'span';
        $removeExpression = implode('; ', array_filter([
            'removeChip($event)',
            filled($remove) ? $remove : null,
            blank($remove) && blank($wireRemove) ? '$root.remove()' : null,
        ]));

        $container = $attributes->only($outer)
            ->class([
                $base,
                'relative isolate',
                $colours,
                'has-[[data-chip-action]:focus-visible]:outline-3 has-[[data-chip-action]:focus-visible]:outline-offset-2 has-[[data-chip-action]:focus-visible]:outline-secondary',
            ])
            ->merge(array_filter(['style' => $anchor ? "anchor-name: {$anchor}" : null]));

        $action = $attributes->except($outer)
            ->class([
                'flex h-full min-w-0 items-center outline-none',
                match (true) {
                    filled($avatar) => 'ps-0.75',
                    filled($icon) => 'ps-1.75',
                    default => 'ps-2.75',
                },
                $removable ? 'pe-2' : 'pe-2.75',
                'cursor-pointer before:absolute before:-inset-px before:-z-10 before:rounded-corner-sm before:bg-current before:opacity-0 before:transition-opacity before:duration-(--md-sys-motion-effects-fast-duration) before:ease-effects-fast hover:before:opacity-8 focus-visible:before:opacity-10 active:before:opacity-10' => $interactive && ! $disabled,
                $target => $interactive,
                'cursor-not-allowed' => $interactive && $disabled,
                'pointer-events-none' => $inert,
            ])
            ->merge(array_filter([
                'data-chip-action' => $interactive ? true : null,
                'href' => $isLink ? $link : null,
                'target' => $isLink && $external ? '_blank' : null,
                'rel' => $isLink && $external ? 'noopener' : null,
                'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
                'aria-disabled' => $inert ? 'true' : null,
                'tabindex' => $inert ? '-1' : null,
                'type' => $actionTag === 'button' ? 'button' : null,
                'disabled' => $actionTag === 'button' && $disabled ? true : null,
                'aria-pressed' => $actionTag === 'button' && $selected !== null ? ($selected ? 'true' : 'false') : null,
            ], fn ($attribute): bool => $attribute !== null));
    } else {
        $tag = match (true) {
            $checkbox => 'label',
            $isLink => 'a',
            default => 'button',
        };
        $control = $checkbox
            ? $attributes->except($outer)->merge(array_filter([
                'type' => 'checkbox',
                'name' => $name,
                'value' => $value,
                'checked' => $checked ? true : null,
                'disabled' => $disabled ? true : null,
            ], fn ($attribute): bool => $attribute !== null))->class('peer sr-only')
            : null;

        $container = ($checkbox ? $attributes->only($outer) : $attributes)
            ->class([
                $base,
                'state-layer relative',
                'focus-ring' => ! $checkbox,
                'has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-secondary has-focus-visible:before:opacity-10' => $checkbox,
                $kind === 'filter' || filled($icon) ? 'ps-1.75' : 'ps-3.75',
                $iconRight ? 'pe-1.75' : 'pe-3.75',
                $colours,
                $target,
                'cursor-pointer' => ! $disabled,
                'cursor-not-allowed' => $disabled && ! $isLink,
                'pointer-events-none' => $inert,
            ])
            ->merge(array_filter([
                'data-chip' => $kind,
                'href' => $isLink ? $link : null,
                'target' => $isLink && $external ? '_blank' : null,
                'rel' => $isLink && $external ? 'noopener' : null,
                'wire:navigate' => $isLink && ! $external && ! $noWireNavigate && ! $attributes->has('wire:navigate') ? true : null,
                'aria-disabled' => $inert ? 'true' : null,
                'tabindex' => $inert ? '-1' : null,
                'type' => $tag === 'button' ? 'button' : null,
                'disabled' => $tag === 'button' && $disabled ? true : null,
                'name' => $tag === 'button' ? $name : null,
                'value' => $tag === 'button' ? $value : null,
                'aria-pressed' => $kind === 'filter' && ! $checkbox ? ($selected ? 'true' : 'false') : null,
                'style' => $anchor ? "anchor-name: {$anchor}" : null,
            ], fn ($attribute): bool => $attribute !== null));
    }
@endphp

@if ($kind === 'input')
    <span data-chip="input" @if ($removable) x-data="materialChip" x-on:keydown="removeOnKey($event)" @endif {{ $container }}>
        <{{ $actionTag }} {{ $action }}>
            @if ($avatar)
                @if ($initials)
                    <span aria-hidden="true" @class(['me-2 grid size-6 shrink-0 place-items-center rounded-corner-full bg-primary-container type-label-sm text-on-primary-container', 'opacity-38' => $disabled])>{{ $avatar }}</span>
                @else
                    <img src="{{ $avatar }}" alt="" @class(['me-2 size-6 shrink-0 rounded-corner-full object-cover', 'opacity-38' => $disabled]) />
                @endif
            @elseif ($icon)
                <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
            @endif

            <span data-chip-label class="truncate">{{ $label ?? $slot }}</span>
        </{{ $actionTag }}>

        @if ($removable)
            <button
                type="button"
                @if (filled($text)) data-chip-remove aria-label="{{ __('Remove :label', ['label' => $text]) }}" @else data-chip-remove="{{ __('Remove :label') }}" @endif
                @if ($wireRemove) wire:click="{{ $wireRemove }}" @endif
                x-on:click="{{ $removeExpression }}"
                @disabled($disabled)
                @class([
                    'relative me-1.75 grid size-4.5 shrink-0 place-items-center rounded-corner-full',
                    'cursor-pointer focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-secondary' => ! $disabled,
                    'before:absolute before:-inset-0.75 before:rounded-corner-full before:bg-current before:opacity-0 before:transition-opacity before:duration-(--md-sys-motion-effects-fast-duration) before:ease-effects-fast hover:before:opacity-8 focus-visible:before:opacity-10 active:before:opacity-10' => ! $disabled,
                    'after:absolute after:-inset-x-2 after:-inset-y-3.75',
                    'cursor-not-allowed' => $disabled,
                ])
            >
                <x-livewire-material::icon name="close" class="size-4.5" />
            </button>
        @endif

        @if (filled($name))
            <input type="hidden" name="{{ $name }}" value="{{ $value ?? $text }}" />
        @endif

        @if ($tooltip !== null)
            <x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
        @endif
    </span>
@else
    <{{ $tag }} {{ $container }}>
        @if ($checkbox)
            <input {{ $control }} />
        @endif

        @if ($kind === 'filter')
            {{-- The check grows in from nothing; beside an icon it takes the icon's place. --}}
            <span @class([
                'me-2 grid shrink-0 overflow-hidden *:col-start-1 *:row-start-1',
                'size-4.5' => filled($icon),
                'h-4.5 w-0 transition-[width] duration-(--md-sys-motion-effects-default-duration) ease-effects-default group-has-checked/chip:w-4.5 group-has-checked/chip:duration-(--md-sys-motion-spatial-fast-duration) group-has-checked/chip:ease-spatial-fast group-aria-pressed/chip:w-4.5 group-aria-pressed/chip:duration-(--md-sys-motion-spatial-fast-duration) group-aria-pressed/chip:ease-spatial-fast' => blank($icon),
            ])>
                @if ($icon)
                    <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['size-4.5 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-0 group-aria-pressed/chip:opacity-0', $leadingInk])" />
                @endif
                <x-livewire-material::icon name="check" data-chip-check :class="$check" />
            </span>
        @elseif ($icon)
            <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
        @endif

        <span class="truncate">{{ $label ?? $slot }}</span>

        @if ($iconRight)
            <x-livewire-material::icon :name="$iconRight" :class="\Illuminate\Support\Arr::toCssClasses(['ms-2 size-4.5', $trailingInk])" />
        @endif

        @if ($tooltip !== null)
            <x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
        @endif
    </{{ $tag }}>
@endif