@props([
    'name',
    'show' => false,
    'maxWidth' => '2xl',
    'slideOver' => false, // slides in from the right instead of the centered dialog
])

@php
    $maxWidthClass = [
        'sm' => 'sm:max-w-sm',
        'md' => 'sm:max-w-md',
        'lg' => 'sm:max-w-lg',
        'xl' => 'sm:max-w-xl',
        '2xl' => 'sm:max-w-2xl',
        'full' => 'sm:max-w-none',
    ][$maxWidth] ?? 'sm:max-w-2xl';
    $isFullscreen = $maxWidth === 'full';
@endphp

<div
    x-data="{
        show: @js($show),
        focusables() {
            // All focusable element types...
            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
    }"
    x-init="$watch('show', value => {
        if (value) {
            document.body.classList.add('overflow-y-hidden');
            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
        } else {
            document.body.classList.remove('overflow-y-hidden');
        }
    })"
    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
    x-on:close-modal.window="$event.detail == '{{ $name }}' ? show = false : null"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    class="fixed inset-0 z-50 {{ $slideOver ? '' : 'overflow-y-auto px-4 py-6 sm:px-0' }}"
    style="display: {{ $show ? 'block' : 'none' }};"
>
    <div
        x-show="show"
        class="fixed inset-0 bg-gray-500/75 transition-all"
        x-on:click="show = false"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    ></div>

    <div
        x-show="show"
        class="{{ $slideOver
            ? 'fixed inset-y-0 right-0 flex h-full w-full max-w-md flex-col bg-white shadow-xl'
            : 'mb-6 overflow-hidden rounded-lg bg-white shadow-xl transform transition-all sm:mx-auto sm:w-full '.($isFullscreen ? 'h-[calc(100%-3rem)] w-[calc(100%-2rem)] sm:h-[calc(100%-3rem)] sm:w-[calc(100%-3rem)]' : $maxWidthClass) }}"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="{{ $slideOver ? 'translate-x-full' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95' }}"
        x-transition:enter-end="{{ $slideOver ? 'translate-x-0' : 'opacity-100 translate-y-0 sm:scale-100' }}"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="{{ $slideOver ? 'translate-x-0' : 'opacity-100 translate-y-0 sm:scale-100' }}"
        x-transition:leave-end="{{ $slideOver ? 'translate-x-full' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95' }}"
    >
        @isset($header)
            <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
                <div class="text-lg font-semibold text-slate-900">{{ $header }}</div>
                <button type="button" x-on:click="show = false" class="text-slate-400 transition hover:text-slate-600" aria-label="Close">
                    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                </button>
            </div>
        @endisset

        <div class="{{ $slideOver || $isFullscreen ? 'flex-1 overflow-y-auto' : '' }}">
            {{ $slot }}
        </div>

        @isset($footer)
            <div class="flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4">
                {{ $footer }}
            </div>
        @endisset
    </div>
</div>