<script lang="ts">
	/** @type {import('./$types').PageData} */
	// import { page } from '$app/stores';
	// console.log($page.params.slug);
	export let data: any;

	// Imports
	import type { key_val } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	// import { api } from '$lib/api';
	// import Element_ae_crud from '$lib/element_ae_crud.svelte';
	import Element_data_store from '$lib/elements/element_data_store_v2.svelte';

	import { liveQuery } from 'dexie';
	// import { core_func } from '$lib/ae_core_functions';
	import { db_core } from '$lib/ae_core/db_core';
	// import { db_events } from "$lib/db_events";
	import {
		ae_snip,
		ae_loc,
		ae_sess,
		ae_api,
		ae_trig,
		slct,
		slct_trigger
	} from '$lib/stores/ae_stores';
	// import { events_loc, events_sess, slct, events_trigger } from '$lib/stores/ae_events_stores';
	// import { events_func } from '$lib/ae_events_functions';

	import Person_view from './../../person_view.svelte';

	// Exports
	// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

	// Variables
	// 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);

	$ae_loc.url_origin = data.url.origin;

	$slct.person_id = ae_acct.slct.person_id;
	$slct.person_obj = ae_acct.slct.person_obj;

	$ae_sess.person.show_edit__person = false;

	let lq__person_obj = liveQuery(() => db_core.person.get($slct.person_id));
	$slct.lq__person_obj = lq__person_obj;

	if (!$ae_loc.person) {
		$ae_loc.person = {};
	}
	$ae_loc.person.show_content__person_page_help = false;

	// *** Functions and Logic
</script>

<svelte:head>
	<title>
		Person: {ae_util.shorten_string({
			string: $lq__person_obj?.full_name,
			max_length: 20,
			begin_length: 10,
			end_length: 4
		})}
		({$lq__person_obj?.person_id ?? 'loading...'}) - Core - {$ae_loc?.title}
	</title>
</svelte:head>

<section class="ae_core__person md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8">
	<div
		class="core__person_view_menu {ae_snip.classes__core_menu}"
		class:border-gray-100={!$ae_loc.person.show_content__person_page_help}
	>
		<div>
			<a href="/core" class={ae_snip.classes__core_menu__button}>
				<span class="fas fa-arrow-left mx-1"></span>
				Back to Core
			</a>

			<button
				type="button"
				on:click={() => {
					$ae_loc.person.show_content__person_page_help =
						!$ae_loc.person.show_content__person_page_help;
				}}
				class={ae_snip.classes__core_menu__button}
				title="Help and information about the session search"
			>
				<span class="fas fa-question-circle mx-1"></span>
				{#if $ae_loc.person.show_content__person_page_help}
					Hide
				{:else}
					Show
				{/if}
				Help?
			</button>
		</div>

		<Element_data_store
			ds_code="events__core__person_page_help"
			ds_name="Default: Core - Person Page Help"
			ds_type="html"
			for_type="event"
			for_id={$slct.event_id}
			class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
			show_edit={false}
			show_edit_btn={true}
			hide={!$ae_loc.person.show_content__person_page_help}
		/>

		<div>
			<button
				type="button"
				on:click={() => {
					$ae_loc.person.show_content__person_page_help =
						!$ae_loc.person.show_content__person_page_help;
				}}
				class="btn btn-sm mx-1 preset-tonal-error border border-error-500 hover:preset-filled-error-500"
				class:hidden={!$ae_loc.person.show_content__person_page_help}
				title="Help and information about the session search"
			>
				<span class="fas fa-question-circle mx-1"></span>
				{#if $ae_loc.person.show_content__person_page_help}
					Hide
				{:else}
					Show
				{/if}
				Help?
			</button>
		</div>
	</div>

	{#if !$lq__person_obj}
		<div class="flex flex-row items-center justify-center">
			<span class="fas fa-spinner fa-spin mx-1"></span>
			<span>Loading...</span>
		</div>
	{:else}
		<!-- {$lq__person_obj?.full_name} -->
	{/if}

	<!-- <hr class="w-full border border-gray-200" /> -->

	<!-- {#await $slct.person_obj}
    <span class="fas fa-spinner fa-spin text-xl text-blue-500"></span>
{:then result} -->
	<Person_view person_id={$slct.person_id} />
	<!-- {:catch error}
    <div class="text-red-800">
        <span class="fas fa-exclamation-triangle text-xl"></span>
        <span>Error: {error.message}</span>
    </div>
{/await} -->

	<!-- {$slct.person_id ?? 'Unknown ID'} -->
</section>

<style lang="postcss">
	/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
	div.ae_quick_modal_container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: hsla(0, 0%, 50%, 0.75);
		/* padding: 1rem; */
		/* border: solid thick red; */
	}

	/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
	section.ae_quick_popover {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: hsla(0, 0%, 97%, 0.97);
		/* margin-top: 1rem;
    margin-bottom: 2rem; */
		/* padding: 1rem;
    padding-top:4rem; */
		/* padding-bottom: 4rem; */
		border: solid thin hsla(0, 0%, 0%, 0.9);
		border-radius: 0.5rem;
		box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);

		min-height: 30%;
		/* max-height: 100vh; */
		min-width: 80%;

		/* overflow-y: auto; */
	}
</style>
