<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = $state(0);

// *** Import Svelte specific
import { browser } from '$app/environment';

// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import {
        Brain,
        House, Library,
        RefreshCw,
        Satellite
    } from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
// import { Modal } from '@skeletonlabs/skeleton-svelte';
// import type {
//     ModalComponent
//     } from '@skeletonlabs/skeleton-svelte';

// const modalRegistry: Record<string, ModalComponent> = {
// 	// Set a unique modal ID, then pass the component reference
// 	// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// 	// modalComponentTwo: { ref: ModalComponentTwo },
// 	// ...
// };

// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import Element_data_store from '$lib/element_data_store_v2.svelte';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';

interface Props {
    /** @type {import('./$types').LayoutData} */
    data: any;
    children?: import('svelte').Snippet;
}

let { data, children }: Props = $props();
// import { events_func } from '$lib/ae_events_functions';

// import Element_data_store from '$lib/element_data_store_v2.svelte';

$events_loc.qry__enabled = 'enabled';
$events_loc.qry__hidden = 'not_hidden';
$events_loc.qry__limit = 15;
$events_loc.qry__offset = 0;

// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
console.log(`$slct.account_id = `, $slct.account_id);
if (log_lvl) {
    console.log(`$slct.account_id = `, $slct.account_id);
}
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);

$events_slct.event_id = ae_acct.slct.event_id;
// $events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;

let ae_promises: key_val = {};

if (browser) {
    console.log('Events - Presentation Management: +layout.svelte');
    console.log($events_slct.event_obj_li);

    // if ($ae_loc.ver != $ae_sess.ver || $ae_loc.ver_idb != $ae_sess.ver_idb || $events_loc.ver != $events_sess.ver|| $events_loc.ver_idb != $events_sess.ver_idb) {
    //     console.log('New version available!!!');
    //     console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
    //     console.log(`$ae_loc.ver_idb: ${$ae_loc.ver_idb} != $ae_sess.ver_idb: ${$ae_sess.ver_idb}`);
    //     console.log(`$events_loc.ver: ${$events_loc.ver} != $events_sess.ver: ${$events_sess.ver}`);
    //     console.log(`$events_loc.ver_idb: ${$events_loc.ver_idb} != $events_sess.ver_idb: ${$events_sess.ver_idb}`);

    //     // alert('New version available!!!');

    //     // Clear Indexed DB as well
    //     indexedDB.deleteDatabase('ae_core_db');
    //     indexedDB.deleteDatabase('ae_events_db');

    //     localStorage.removeItem('ae_loc');
    //     localStorage.removeItem('events_loc');
    //     localStorage.clear();

    //     sessionStorage.removeItem('ae_sess');
    //     sessionStorage.removeItem('events_sess');
    //     sessionStorage.clear();


    //     // This does not seem to work fast enough or something?
    //     goto('/', {replaceState: true, invalidateAll: true});


    //     localStorage.removeItem('ae_loc');
    //     localStorage.removeItem('events_loc');
    //     localStorage.clear();
    // }
}


// Updated 2024-06-25
// $: if ($events_trigger == 'load__event_session_obj_id' && $events_trig_kv['event_session_id']) {
//     console.log(`load__event_session_obj_id() $events_slct.event_session_id=${$events_slct.event_session_id}`);

//     $events_trigger = null;

//     if ($events_slct.event_session_id) {
//         $events_trig_kv['event_session_id'] = ({
//             api_cfg: $ae_api,
//             event_session_id: $events_slct.event_session_id,
//             log_lvl: 1
//         })
//         .then(function (load_results) {
//             console.log(`ae_event_session_get_promise:`, load_results);
//         });
//     }
// }


</script>


<svelte:head>
	<title>Presentation Management - {$events_loc.title ?? 'Æ loading...'}</title>
</svelte:head>


<!-- <Modal components={modalRegistry}
    regionBackdrop=''
    regionBody=''
    regionHeader='modal-header card-header text-2xl font-bold'
    regionFooter='modal-footer flex justify-between space-x-2'
    /> -->

<!-- App Shell -->
<!-- <AppShell
    regionPage={($ae_loc.iframe ? 'iframe' : '')}
    slotHeader={($ae_loc.iframe ? 'iframe' : '')}
    slotFooter={($ae_loc.iframe ? 'iframe' : '')}
    > -->
<div
    class:iframe={$ae_loc?.iframe}
    class="
        ae_events
        h-full max-h-full max-w-6xl overflow-auto
        flex flex-col gap-1
        m-auto
        "
    >

{#if !$ae_sess?.disable_sys_nav}
<nav
    class="
        submenu
        flex flex-row flex-wrap
        items-center justify-between
        gap-1
        border-b-2
        p-1
        px-2
        pb-2
        "
    >
    <span class="justify-self-start">

        <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
        <Satellite
            size="1.5em"
            class="mx-1 inline-block text-gray-500"
            />
        <abbr title="Aether - Events Module">
            Æ
            Events
        </abbr>
    </span>
    {#if !$ae_sess?.disable_sys_header}
    <Element_data_store
        ds_code="hub__site__appshell_header"
        ds_type="html"
        />
    {/if}
    <a
        href="/"
        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
        >
        <House />
        <span class="hidden md:inline">
            Home
        </span>
    </a>
</nav>
{/if}

<section
    class:iframe={$ae_loc?.iframe}
    class="main_content grow px-1 md:px-2 pb-28"
    >

    <!-- OLD: App Bar -->
    <!-- <AppBar
        gridColumns="grid-cols-3"
        slotDefault="place-self-center"
        slotTrail="place-content-end"
        padding="px-4"
        >
        <Element_data_store
            ds_code="hub__page__appshell_header_lead"
            ds_type="html"
            />
        <Element_data_store
            ds_code="hub__site__appshell_header"
            ds_type="html"
            />
        <Element_data_store
            ds_code="hub__page__appshell_header_trail"
            ds_type="html"
            />
    </AppBar> -->


    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->


        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
        <!-- {access_key ?? '-- param key not set --'} -->

        <!-- Page Route Content -->
        {@render children?.()}



    <!-- {#snippet footer()} -->



    <!-- {/snippet} -->

</section>


{#if !$ae_sess?.disable_sys_footer}
<section
    class="footer_contenttext-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
    class:ae_debug={$ae_loc.debug}
    >

    <Element_data_store
        ds_code="hub__site__appshell_footer"
        ds_type="html"
        class_li="grow flex flex-row justify-between"
        />

</section>
{/if}


</div>
<!-- </AppShell> -->
