<script lang="ts">
/** @type {import('./$types').PageData} */

// *** Import Svelte specific
import { onDestroy, onMount } from 'svelte';
// import { browser } from '$app/environment';

// *** Import other supporting libraries
import { Modal } from 'flowbite-svelte';

// *** Import Aether specific variables and functions
// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';

import Media_player from './../ae_idaa_comp__media_player.svelte';

interface Props {
    log_lvl?: number;
    lq__archive_content_obj: any;
}

let { log_lvl, lq__archive_content_obj }: Props = $props();

$effect(() => {
    if (log_lvl) {
        console.log(`lq__archive_content_obj:`, lq__archive_content_obj);
    }
});

onDestroy(() => {
    // This does not always seem to be triggered???
    $idaa_slct.archive_content_id = null;
    let message = { archive_content_id: null };
    window.parent.postMessage(message, '*');
});
</script>

<!-- title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}" -->
<Modal
    bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
    autoclose={true}
    onclose={() => {
        // We want to cancel the inline edit if the modal is closed
        // $idaa_sess.archives.show__inline_edit__archive_content_id = false;
    }}
    outsideclose={true}
    placement="top-center"
    size="xl"
    class="top-center relative mx-auto flex w-full flex-col divide-y divide-gray-200 rounded-lg border-gray-200 bg-white text-gray-800 shadow-md dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
    {#snippet header()}
        <div class="flex w-full flex-row items-center justify-between">
            <h3 class="text-base font-semibold">
                <!-- <span class="text-sm text-gray-500">
                Viewing:
            </span> -->
                {$idaa_slct.archive_content_obj?.name} - {$lq__archive_content_obj?.archive_content_id}
            </h3>
        </div>

        <button
            type="button"
            class="btn btn-sm btn-secondary absolute top-2 right-2"
            onclick={() => {
                $idaa_sess.archives.show__modal_view__archive_content_id = false;

                $idaa_slct.archive_content_id = null;
                let message = { archive_content_id: null };
                window.parent.postMessage(message, '*');
            }}>
            <span class="fas fa-times"></span>
            Close
        </button>
    {/snippet}

    <Media_player {lq__archive_content_obj} />

    {#snippet footer()}
        <button
            type="button"
            class="btn btn-sm btn-secondary"
            onclick={() => {
                $idaa_sess.archives.show__modal_view__archive_content_id = false;

                $idaa_slct.archive_content_id = null;
                let message = { archive_content_id: null };
                window.parent.postMessage(message, '*');
            }}>
            <span class="fas fa-times"></span>
            Close
        </button>
    {/snippet}
</Modal>
