<script lang="ts" context="module">
    import type { Snippet } from "svelte";

    let modals = $state<Array<{snippet: Snippet | Snippet<any>, isFullScreen: boolean, arg?: any }>>([]);

    export function openModal(snippet: Snippet | Snippet<any>, isFullScreen: boolean, arg?: any)
    {
        modals.push({snippet, isFullScreen, arg});
        modals = modals;
    }

    export function closeModal()
    {
        modals.pop();
    }

    export function confirm(): Promise<boolean>
    {
        let resolvePromise: (result: boolean) => void;
        let confirmPromise = new Promise<boolean>((resolve) =>
        {
            resolvePromise = resolve;
        });
        
        openModal(confirmModal, false, resolvePromise!);

        return confirmPromise;
    }
</script>

{#each modals as {snippet, isFullScreen, arg} }
    {#if isFullScreen}
        <div class="full-screen-modal">
            {@render snippet(arg)}
        </div>
    {:else}
        <div class="dialog-modal-wrapper">
            <div class="dialog-modal">
                {@render snippet(arg)}
            </div>
        </div>
    {/if}
{/each}

{#snippet confirmModal(resolvePromise: (value: boolean | PromiseLike<boolean>) => void)}
    <button on:click={() => resolvePromise(true)}>Accept</button>
    <button on:click={() => resolvePromise(false)}>Cancel</button>
{/snippet}