@props([
    'title' => 'Modal Title',
    'titleClass' => ' ',
    'boxClass' => 'w-full h-full',
    'innerClass' => ' ',
    'contentClass' => ' ',
    'opened' => false,
    'noBackdropClose' => 'false',
    'size' => '2xl',
    'model',
    'onClose',
])

@php
    use TailwindMerge\Laravel\Facades\TailwindMerge;
    $tailwind = new TailwindMerge();
    $maxWidth =
        [
            'sm' => 'max-w-sm',
            'md' => 'max-w-md',
            'lg' => 'max-w-lg',
            'xl' => 'max-w-xl',
            '2xl' => 'max-w-2xl',
            '3xl' => 'max-w-3xl',
            '4xl' => 'max-w-4xl',
            '5xl' => 'max-w-5xl',
            '6xl' => 'max-w-6xl',
            '7xl' => 'max-w-7xl',
        ][$size] ?? 'max-w-2xl';

    $DEFAULT_TITLE_CLASS = $tailwind::merge(
        "Modal-title w-full bg-primary-100 h-12 items-center justify-between text-white font-bold px-4 rounded-t-md $titleClass",
    );
    $DEFAULT_INNER_CLASS = $tailwind::merge(
        "Modal-inner flex min-h-full justify-center p-4 text-center sm:items-center sm:p-0 $innerClass",
    );
    $DEFAULT_ROOT_CLASS = $tailwind::merge(
        "Modal-root relative overflow-visible rounded-t-lg text-left sm:my-8 sm:mx-4 w-full $maxWidth",
    );
    $DEFAULT_CONTENT_CLASS = $tailwind::merge(
        "Modal-content w-full p-3 flex-1 rounded-b-lg overflow-visible $contentClass",
    );

@endphp

<template
    x-if="{!! $model !!}"
    x-init="() => {
        $watch('{!! $model !!}', value => {
            if (value) {
                document.body.classList.add('overflow-hidden');
            } else {
                document.body.classList.remove('overflow-hidden');
            }
        });
    }"
    wire:key='{{ rand() }}'
>
    <div
        {{ $attributes->merge([
            'class' => 'Modal relative z-50',
        ]) }}
        x-data="{
            baseModalRef: false,
            noBackdropClose: {{ $noBackdropClose }},
        }"
        x-init="$nextTick(() => {
            baseModalRef = true
        })"
        x-on:keydown.escape.window="close()"
    >
        <div
            class="Modal-wrapper fixed inset-0 z-50 w-screen overflow-y-auto"
            x-show="baseModalRef"
            x-trap="{!! $model !!}"
            role="dialog"
            aria-modal="true"
            tabindex="-999"
        >

            <div
                x-show="baseModalRef"
                class="{{ $DEFAULT_INNER_CLASS }} will-change-transform"
                x-transition:enter="transition ease-out duration-500"
                x-transition:enter-start="opacity-0 transform-cpu -translate-y-full"
                x-transition:enter-end="opacity-100 transform-cpu scale-100"
                x-transition:leave="transition ease-out duration-700"
                x-transition:leave-start="opacity-100 transform-cpu scale-100"
                x-transition:leave-end="opacity-0 transform-cpu -translate-y-full scale-90"
            >

                <div
                    class="{{ $DEFAULT_ROOT_CLASS }}"
                    x-data="{
                        shaking: false,
                        modalInputPicker: false,
                        close() {
                            @isset($onClose)
                            {!! $onClose !!}
                            @endisset
                            $refs['modalRefButtonClose'].click()
                        },
                    }"
                    x-bind:class="{ 'transition-transform duration-300 animate-[shaking_0.3s_linear_infinite]': shaking }"
                    x-init="() => $watch('shaking', value => {
                        if (value) setTimeout(() => shaking = false, 300);
                    })"
                    x-on:notify.window="close()"
                >

                    <x-box-wrapper
                        class="flex flex-col shadow-none p-0 md:p-0 {{ $boxClass }}"
                        x-on:click.outside="() => {
                            if (modalInputPicker)
                                return;
                            else if (!noBackdropClose)
                                close();
                            else
                                shaking = true;
                        }"
                    >

                        @isset($header)
                            <x-group>
                                {{ $header }}
                            </x-group>
                        @else
                            <x-group class="{{ $DEFAULT_TITLE_CLASS }}">
                                <span>
                                    {{ $title }}
                                </span>

                                <button
                                    type="button"
                                    class="flex p-1 group rounded-full text-center items-center"
                                    x-on:click="() => {
                                        baseModalRef = false,
                                        $dispatch('close-modal')
                                    }"
                                    x-on:click.debounce.200ms="{!! $model !!} = false"
                                    x-ref="modalRefButtonClose"
                                >
                                    <i
                                        class="ph ph-x group-hover:font-extrabold group-hover:ph-bold"></i>
                                </button>
                            </x-group>
                        @endisset

                        <x-stack class="{{ $DEFAULT_CONTENT_CLASS }}">
                            {{ $slot }}
                        </x-stack>

                    </x-box-wrapper>

                </div>
            </div>
        </div>

        <x-box
            class="Modal-overlay fixed inset-0 bg-black/20 bg-opacity-50 transition-opacity backdrop-blur-sm duration-75"
            x-show.transition="baseModalRef"
            x-transition:enter="opacity-0 ease-out"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-out delay-150"
            x-transition:leave-end="opacity-0"
            x-cloak
        />
    </div>
</template>