<script lang="ts">
    import { scale } from "svelte/transition";
    import { twMerge } from "tailwind-merge";

    export const toggle = () => {
        if (visible) {
            close();
        } else {
            show();
        }
    };

    export const show = () => {
        modalRef.showModal();
        onShow();
        visible = true;
    };

    export const close = () => {
        modalRef.close();
        onClose();
        visible = false;
    };

    export let onShow = () => {};
    export let onClose = () => {};

    let visible = false;

    let modalRef: HTMLDialogElement;
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog
    bind:this={modalRef}
    on:close={() => (visible = false)}
    transition:scale={{ duration: 200 }}
    class={twMerge(
        `fixed inset-0 z-40 flex max-h-[calc(100vh-16rem)] flex-col rounded-md border-2 border-contrast-100 bg-primary-100 p-6 text-contrast-900 lg:w-3/4`,
        $$restProps["class"],
        visible ? "" : "hidden"
    )}
    {...$$restProps}
>
    <div class="mb-4 flex">
        <h1 class="grow text-2xl font-semibold">
            <slot name="header" />
        </h1>
    </div>

    <div class="grow overflow-auto rounded-md bg-primary-300 p-4 shadow-inner">
        <slot />
    </div>

    <div class="mt-4 flex justify-end gap-4">
        <slot name="button-row" />
    </div>
</dialog>
