<script lang="ts">
	/** @type {import('./$types').LayoutData} */
	export let data: any;

	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	// import type { Writable } from 'svelte/store';

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

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

	if (!$ae_loc.admin) {
		$ae_loc.admin = {};
	}

	$ae_loc.qry__enabled = 'enabled';
	$ae_loc.qry__hidden = 'not_hidden';
	$ae_loc.qry__limit = 15;
	$ae_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);
	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;

	let ae_promises: key_val = {};

	onMount(() => {
		console.log('Admin: +layout.svelte');
	});

	// 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: any) {
	//         console.log('No results returned or failed.', error);
	//     });

	//     return ae_promises.load__event_obj;
	// }
</script>

<svelte:head>
	<title>Æ Admin - {$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<section class="submenu flex flex-row justify-center" class:hidden={$ae_loc.iframe}>
	<span class=" preset-tonal-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:preset-tonal-secondary border border-secondary-500"
					class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') ||
						(!$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:preset-tonal-secondary border border-secondary-500"
					class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') ||
						(!$ae_loc.administrator_access && item.access === 'administrator') ||
						item.hide}
					class:disabled={item.disable}
				>
					{item.name}
				</a>
			{/if}
		{/each}
	</span>
</section>

<slot></slot>
