<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data;
import { goto } from '$app/navigation';
import type { Writable } from 'svelte/store';
import { localStorageStore } from '@skeletonlabs/skeleton';

import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';

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


// let ae_slct_loc: Writable<key_val> = localStorageStore(`ae_slct__event_id`, ds_code_obj);
// console.log(`ae_ Data Store ${ds_code} = `, $ae_slct_loc);

let ae_promises: key_val = {};


if (data.url.searchParams.get('event_id')) {
    $events_slct.event_id = data.url.searchParams.get('event_id');
} else if (data.ae_loc.site_cfg_json.slct__event_id) {
    $events_slct.event_id = data.ae_loc.site_cfg_json.slct__event_id;
} else if ($events_loc.default__event_id) {
    $events_slct.event_id = $events_loc.default__event_id;
} else if ($events_slct.event_id) {
    console.log(`Event ID already set:`, $events_slct.event_id);
} else {
    console.log(`No Event ID set.`);
}

if ($events_slct.event_id) {
    $events_trigger = 'load__event_obj';
}


// Updated 2024-03-06
$: if ($events_trigger == 'load__event_obj' && $events_slct.event_id) {
    console.log(`$events_slct.event_id=${$events_slct.event_id}`);
    $events_trigger = null;

    let load_obj_results = handle_load_ae_obj_id__event({event_id: $events_slct.event_id, try_cache: false})
    .then(function (load_obj_results) {
        if (load_obj_results) {
            console.log(`load_obj_results=`, load_obj_results);
        } else {
            console.log('No results returned.');
        }
    });
    $events_slct.event_obj = load_obj_results;
    console.log(`load_obj_results=`, load_obj_results);
}


// Updated 2024-03-06
async function handle_load_ae_obj_id__event({event_id, try_cache=false}) {
    console.log(`*** handle_load_ae_obj_id__event() *** event_id=${event_id} api_cfg=`, $ae_api);

    let params = {};

	// $events_sess.badges.status_load__event_obj = 'loading';
    ae_promises.load__event_obj = await api.get_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: 'event',
        obj_id: event_id, // NOTE: This is the FQDN, not normally the ID.
        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
        params: params,
        log_lvl: 0
        })
    .then(function (event_obj_get_result) {
        if (event_obj_get_result) {
            return event_obj_get_result;
        } else {
            console.log('No results returned.');
            return null;
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });

    return ae_promises.load__event_obj;
}

</script>


<svelte:head>
	<title>Events Badges - {data.ae_loc.title}</title>
</svelte:head>

<!-- <h1>Events Badges Layout?</h1> -->

<div class="submenu flex flex-row justify-center">
    <span class="btn-group variant-soft-secondary px-4 py-2">
    {#each Object.entries(data.submenu) as [key, item]}
        <!-- <a href="/settings/{item.slug}">{item.title}</a> -->
        <!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
        {#if item.disable}
        <button
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            disabled={item.disable}

            on:click={() => {
                // window.location(item.href);
                // href={item.href}
                // invalidateAll
                goto(item.href, { });
            }}
            >
            {item.name}
        </button>
        {:else}
        <a
            href={item.href}
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            class:disabled={item.disable}
            >
            {item.name}
        </a>
        {/if}

        <!-- <button
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            disabled={item.disable}

            on:click={() => {
                // window.location(item.href);
                // href={item.href}
                // invalidateAll
                goto(item.href, { });
            }}
            >
            {item.name}
        </button> -->
    {/each}
    </span>
</div>

<slot></slot>
