<script lang="ts">
	interface Props {
		/** @type {import('./$types').PageData} */
		data: any;
		log_lvl?: number;
	}

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

	// *** Import Svelte specific
	// import { goto } from '$app/navigation';

	// *** Import other supporting libraries
	// import { browser } from '$app/environment';
	import { liveQuery } from 'dexie';

	// *** Import Aether specific variables and functions
	// import type { key_val } from '$lib/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	// import { core_func } from '$lib/ae_core_functions';
	// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';

	// import Element_ae_crud from '$lib/element_ae_crud
	// import Element_data_store from '$lib/element_data_store_v2.svelte';
	// import MyClipboard from '$lib/e_app_clipboard.svelte';

	import { db_events } from '$lib/ae_events/db_events';
	// import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger
	} from '$lib/stores/ae_events_stores';
	// import { events_func } from '$lib/ae_events_functions';

	import Comp_badge_obj_view from './ae_comp__badge_obj_view.svelte';

	// *** Variables
	// let test_event_id = data.params.event_id;
	let event_badge_id = data.params.badge_id;
	// console.log(`Data Params: event_id=${test_event_id}; badge_id=${test_event_badge_id}`);
	let url_test_val = data.url.searchParams.get('test_val');
	console.log(`URL test_val = ${url_test_val}`);

	let lq__event_badge_obj = $derived(
		liveQuery(async () => {
			if (log_lvl) {
				console.log(`*** LiveQuery: lq__event_badge_obj *** event_badge_id=${event_badge_id}`);
			}
			let results = await db_events.badge.get(event_badge_id);

			return results;
		})
	);

	// *** Functions and Logic

	// if (browser) {
	//     console.log('Browser environment detected.');

	//     let url_test_val = data.url.searchParams.get('test_val');
	//     console.log(`URL test_val = ${url_test_val}`);
	// }
</script>

<svelte:head>
	<title>
		&AElig;: Badge -
		{$lq__event_badge_obj?.given_name ?? '-- not set --'}
		{$lq__event_badge_obj?.family_name ? $lq__event_badge_obj?.family_name.charAt(0) + '.' : ''}
		- Badges v3 -
		{$events_loc?.title}
	</title>
</svelte:head>

<!-- badge ID +page: Where is here??? -->

<!-- event {data.params.event_id} / badge {data.params.badge_id} -->

{#if $lq__event_badge_obj}
	<header
		class="
        w-full
        flex flex-row gap-1 items-center justify-between
        border-b border-gray-300
        mb-2
        pb-2
        "
	>
		<h2 class="text-2xl font-bold">
			Badge:
			{#if $lq__event_badge_obj.full_name}
				{$lq__event_badge_obj.full_name}
			{:else if $lq__event_badge_obj.given_name}
				{$lq__event_badge_obj.given_name}
			{:else}
				-- no name --
			{/if}
		</h2>
		<a
			href={`/events/${$lq__event_badge_obj.event_id}/badges`}
			class="text-sm italic text-blue-600 hover:underline"
		>
			<span class="fas fa-search"></span>
			Back to Search
		</a>
	</header>

	<!-- {#if $lq__event_badge_obj} -->
	<Comp_badge_obj_view
		event_id={$lq__event_badge_obj.event_id}
		{event_badge_id}
		{lq__event_badge_obj}
	/>
	<!-- {/if} -->
{:else}
	<p>No IDB record found for ID: {event_badge_id}</p>
{/if}
