Button

@props([
    // Where it goes. Defaults to the previous page.
    'href' => null,
    // Text beside the arrow. Without it, just the arrow shows, named "Back" for screen readers.
    'label' => null,
])

<a
    href="{{ $href ?? url()->previous() }}"
    {{ $attributes->class(['text-foreground focus-visible:ring-primary inline-flex max-w-fit items-center gap-1.5 rounded-md text-sm outline-none hover:opacity-80 focus-visible:ring-2']) }}
>
    {{-- Points back, which is right in right-to-left pages. --}}
    <x-widget.icon name="arrow-left" class="size-4 rtl:-scale-x-100" />

    @if ($label)
        <span>{{ $label }}</span>
    @else
        <span class="sr-only">Back</span>
    @endif
</a><?php /* No newline after this: PHP drops it after a closing tag, so no space trails the component in running text. */ ?>

@props([
    // primary, secondary, tertiary (outlined), danger (destructive actions), neutral (the quiet choice, e.g. Cancel
    // beside Save) or link (looks like a text link).
    'variant' => 'primary',
    // sm, md or lg.
    'size' => 'md',
    // The button's type: button, submit or reset. Ignored with href.
    'type' => 'button',
    // Makes it a link to this URL. While disabled or loading it renders as a disabled button instead.
    'href' => null,
    // Busy: a spinner takes the place of the first icon and it can't be pressed. Screen readers hear "Loading".
    'loading' => false,
    // Greyed out: it can't be pressed.
    'disabled' => false,
    // An icon before the text.
    'iconStart' => null,
    // An icon after the text.
    'iconEnd' => null,
    // An icon-only, square button: shows just this icon, and needs a label.
    'icon' => null,
    // With icon: the button's name for screen readers and its tooltip. Required there.
    'label' => null,
    // type="submit": once its form submits, the button shows as loading so the form can't be sent twice.
    // false turns it off.
    'submitGuard' => true,
])

@php
    // Disabled looks are skipped while loading (aria-busy), so a loading button keeps its colour.
    $variants = [
        'primary' => 'bg-primary-fill text-on-primary border-transparent not-disabled:hover:bg-primary-hover disabled:not-aria-busy:bg-line disabled:not-aria-busy:text-muted',
        'secondary' => 'bg-primary/10 text-primary border-transparent not-disabled:hover:bg-primary-hover not-disabled:hover:text-on-primary disabled:not-aria-busy:bg-field disabled:not-aria-busy:text-muted',
        'tertiary' => 'bg-transparent text-primary border-primary/40 not-disabled:hover:border-primary-hover not-disabled:hover:bg-primary-hover not-disabled:hover:text-on-primary disabled:not-aria-busy:border-line disabled:not-aria-busy:text-muted',
        // For destructive actions: delete, remove, cancel a subscription.
        'danger' => 'bg-error-fill border-transparent text-white not-disabled:hover:brightness-90 disabled:not-aria-busy:bg-line disabled:not-aria-busy:text-muted',
        // The quiet choice next to a primary action, e.g. Cancel beside Save.
        'neutral' => 'bg-field text-foreground border-transparent not-disabled:hover:bg-line disabled:not-aria-busy:text-muted',
        'link' => 'bg-transparent text-link border-transparent not-disabled:hover:text-link-hover disabled:not-aria-busy:text-muted',
    ];
    // Text and padding are separate so the link variant can keep the text size without the padding.
    $textSizes = ['sm' => 'text-xs', 'md' => 'text-sm', 'lg' => 'text-base'];
    $paddings = ['sm' => 'px-3 py-2', 'md' => 'px-4 py-3', 'lg' => 'px-6 py-3.5'];
    // Icon-only buttons are square and exactly as tall as a text button of the same size.
    $squarePaddings = ['sm' => 'p-2', 'md' => 'p-3.5', 'lg' => 'p-4'];
    // A typo fails loudly, naming the values that work, instead of quietly rendering something else.
    if (! array_key_exists($variant, $variants)) {
        throw new \InvalidArgumentException("Unknown variant [{$variant}] for <x-widget.button>. Use one of: ".implode(', ', array_keys($variants)).'.');
    }
    if (! array_key_exists($size, $textSizes)) {
        throw new \InvalidArgumentException("Unknown size [{$size}] for <x-widget.button>. Use one of: ".implode(', ', array_keys($textSizes)).'.');
    }
    if (! in_array($type, ['button', 'submit', 'reset'], true)) {
        throw new \InvalidArgumentException("Unknown type [{$type}] for <x-widget.button>. Use one of: button, submit, reset.");
    }

    // An icon with no visible text still needs a name for screen readers; fail in development rather than ship a silent button.
    $iconOnly = $icon !== null;
    if ($iconOnly && ($label === null || trim($label) === '')) {
        throw new \InvalidArgumentException("<x-widget.button icon=\"{$icon}\"> needs a label, e.g. label=\"Close\": it is the button's only name for screen readers.");
    }

    $classes = [
        'group/button relative inline-flex min-w-fit items-center justify-center gap-1.5 border font-medium whitespace-nowrap select-none transition-all outline-none',
        'focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
        // A guarded (busy) button is aria-disabled, not disabled, so it keeps focus; it ignores the pointer instead.
        'not-disabled:active:scale-95 disabled:cursor-not-allowed aria-busy:cursor-wait aria-busy:pointer-events-none',
        $variants[$variant],
        $textSizes[$size],
        match (true) {
            $variant === 'link' => 'rounded-md py-1',
            $iconOnly => 'rounded-xl '.$squarePaddings[$size],
            default => 'rounded-xl '.$paddings[$size],
        },
    ];

    // A disabled or loading link renders as a disabled <button>: <a> has no real disabled state.
    $isLink = $href && ! $disabled && ! $loading;
    $iconClass = $size === 'lg' ? 'size-5' : 'size-4';

    // The spinner takes the place of the first icon while busy, so the button doesn't change width.
    // It is always rendered and shown by aria-busy, so resources/js/widget/button can switch it on too.
    $spinnerSlot = $iconOnly || $iconStart ? 'start' : 'end';
    $whileBusy = 'group-aria-busy/button:hidden';
@endphp

<{{ $isLink ? 'a' : 'button' }}
    data-button
    @if ($isLink)
        href="{{ $href }}"
    @else
        type="{{ $type }}"
        @disabled($disabled || $loading)
        @if ($loading) aria-busy="true" @endif
        @if ($type === 'submit' && $submitGuard) data-submit-guard @endif
    @endif
    @if ($iconOnly) aria-label="{{ $label }}" title="{{ $label }}" @endif
    {{ $attributes->class($classes) }}
>
    @if ($spinnerSlot === 'start' && ! $isLink)
        <span class="hidden size-4 animate-spin rounded-full border-2 border-current border-r-transparent group-aria-busy/button:inline-block" aria-hidden="true"></span>
    @endif

    @if ($iconOnly)
        <x-widget.icon :name="$icon" :class="$iconClass.' '.$whileBusy" />
    @else
        @if ($iconStart)
            <x-widget.icon :name="$iconStart" :class="$iconClass.' '.$whileBusy" />
        @endif

        {{ $slot }}

        @if ($iconEnd)
            <x-widget.icon :name="$iconEnd" :class="$spinnerSlot === 'end' ? $iconClass.' '.$whileBusy : $iconClass" />
        @endif
    @endif

    @if ($spinnerSlot === 'end' && ! $isLink)
        <span class="hidden size-4 animate-spin rounded-full border-2 border-current border-r-transparent group-aria-busy/button:inline-block" aria-hidden="true"></span>
    @endif

    @if (! $isLink)
        <span class="sr-only hidden group-aria-busy/button:inline">Loading</span>
    @endif
</{{ $isLink ? 'a' : 'button' }}><?php /* No newline after this: PHP drops it after a closing tag, so no space trails the component in running text. */ ?>

// Double-submit protection for <x-widget.button type="submit">: once its form submits, the button shows
// its loading state, so a slow request can't be sent twice. Opt out with :submit-guard="false".

// A form that downloads a file (or otherwise never leaves the page) would keep its button busy for good;
// after this long with the page still showing, the guard lets go.
const RELEASE_AFTER_MS = 15_000;

function release(button) {
    delete button.dataset.guarded;
    button.removeAttribute('aria-busy');
    button.removeAttribute('aria-disabled');
    if (button.dataset.idleLabel !== undefined) {
        button.setAttribute('aria-label', button.dataset.idleLabel);
        delete button.dataset.idleLabel;
    }
}

// aria-disabled rather than disabled: a disabled button loses keyboard focus to <body>, and screen readers then hear
// nothing. The submit listener below blocks a second submit instead.
function busy(button) {
    button.dataset.guarded = '';
    button.setAttribute('aria-busy', 'true');
    button.setAttribute('aria-disabled', 'true');
    // An icon-only button's aria-label hides its "Loading" text, so say it in the label for now.
    const label = button.getAttribute('aria-label');
    const loading = button.querySelector('.sr-only')?.textContent.trim();
    if (label && loading) {
        button.dataset.idleLabel = label;
        button.setAttribute('aria-label', `${label}, ${loading.toLowerCase()}`);
    }
}

// What had focus as the submit began, before anything else could disable the button (see wire:submit below).
let focusedAtSubmit = null;

// While a form's button is busy, a second submit (Enter in a field, a double click) goes nowhere.
document.addEventListener('submit', (event) => {
    focusedAtSubmit = document.activeElement;
    if (event.target.querySelector?.('[data-button][data-guarded]')) {
        event.preventDefault();
    }
}, true);

// wire:submit: Livewire cancels the browser's submit, sends the form itself and disables the button until the answer
// comes back, which turns it grey and drops focus to <body>. Show the loading state instead, and when Livewire enables
// the button again, let go and give focus back if the button had it.
function guardLivewire(button) {
    const hadFocus = focusedAtSubmit === button;
    busy(button);
    const watch = new MutationObserver(() => {
        if (button.disabled) {
            return;
        }
        watch.disconnect();
        release(button);
        if (hadFocus && (document.activeElement === document.body || document.activeElement === null)) {
            button.focus();
        }
    });
    watch.observe(button, { attributes: true, attributeFilter: ['disabled'] });
}

const livewireSubmit = (form) => Boolean(form.closest('[wire\\:id]')) && [...form.attributes].some((attribute) => attribute.name.startsWith('wire:submit'));

document.addEventListener('submit', (event) => {
    const button = event.submitter;
    const form = event.target;
    if (!button?.matches('[data-submit-guard]')) {
        return;
    }
    // A form that opens somewhere else (target="_blank") leaves this page as it is, so there's nothing to guard.
    const target = button.getAttribute('formtarget') ?? form.getAttribute('target');
    if (target && target !== '_self') {
        return;
    }

    // Decided on the next tick, after every other submit handler has run: one registered later (or on window)
    // may still cancel the submit, and then the button must stay as it was.
    setTimeout(() => {
        if (!button.isConnected) {
            return;
        }
        if (event.defaultPrevented) {
            // Only while Livewire holds the button disabled: that's what says when its answer is in.
            if (livewireSubmit(form) && button.disabled) {
                guardLivewire(button);
            }

            return;
        }
        busy(button);
        setTimeout(() => {
            if (button.isConnected && 'guarded' in button.dataset && document.visibilityState === 'visible') {
                release(button);
            }
        }, RELEASE_AFTER_MS);
    });
});

// Coming back with the Back button can restore the page as it was left, busy button included.
window.addEventListener('pageshow', (event) => {
    if (!event.persisted) {
        return;
    }
    document.querySelectorAll('[data-button][data-guarded]').forEach(release);
});