<script lang="ts">
	interface Props {
		// Exports
		container_class_li?: string | Array<string>;
		display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
		// export let link_to_id: string;
		lq__event_presentation_obj_li: any;
		log_lvl?: number; // Variables
	}

	let {
		container_class_li = [],
		display_mode = 'default',
		lq__event_presentation_obj_li,
		log_lvl = 0
	}: Props = $props();

	// Imports
	// import type { key_val } from '$lib/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	// import Element_ae_crud from '$lib/element_ae_crud.svelte';
	// import { liveQuery } from "dexie";
	// import { core_func } from '$lib/ae_core_functions';
	// 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_func } from '$lib/ae_events_functions';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger,
		events_trig_kv
	} from '$lib/stores/ae_events_stores';
	import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
	import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
	import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_all.svelte';

	// export let link_to_type: string;

	// let ae_promises: key_val = {};
	// let ae_tmp: key_val = {};
	// let ae_triggers: key_val = {};

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

<section
	class="
    ae_comp event_presentation_obj_li
    border-1 border-dashed border-y-transparent border-r-transparent
    sm:border-l-red-400 md:border-l-yellow-400 lg:border-l-gray-100
    sm:dark:border-l-red-600 md:dark:border-l-yellow-600 lg:dark:border-l-gray-700
    px-0.5 py-2 space-y-2
    min-w-full
    w-full
    container overflow-x-scroll {container_class_li}
    "
>
	<div class="float-right flex flex-row items-center">
		{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
			<button
				type="button"
				onclick={() => {
					console.log('Add Presentation');
					if (
						!confirm(
							'Add a new presentation to the session? You will be able to edit the details after the presentation is created.'
						)
					) {
						return;
					}

					let presentation_data = {
						name: 'TEMP Presentation Name',
						code: 'new_presentation',
						enable: true
					};

					events_func.create_ae_obj__event_presentation({
						api_cfg: $ae_api,
						event_id: $events_slct.event_id,
						event_session_id: $events_slct.event_session_id,
						data_kv: presentation_data,
						log_lvl: 1
					});
				}}
				class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
			>
				<span class="fas fa-plus mx-1"></span>
				Add Presentation
			</button>
		{/if}
	</div>

	<!-- <section class="ae_comp event_presentation_obj_li {container_class_li}"> -->

	<h3 class="h5 text-success-800-400">
		<span class="text-sm">
			Presentations:

			{#if $lq__event_presentation_obj_li?.length}
				<span
					class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
					title="Count {$lq__event_presentation_obj_li.length ?? 'None'}"
				>
					<span class="fas fa-list-ol mx-4"></span>
					{$lq__event_presentation_obj_li.length ?? 'None'}&times;
				</span>
			{/if}

			<!-- {#if !lq__event_presentation_obj_li?.length}
        <span class="text-sm text-gray-500">
            <span class="fas fa-exclamation-triangle mx-1"></span>
            No presentations available to show at this time
        </span>
    {/if} -->
		</span>
	</h3>

	<!-- Show presentations for this LiveQuery -->
	{#if $lq__event_presentation_obj_li?.length}
		<ul class="space-y-4 p-4 m-2 rounded-md preset-filled-surface-400-600">
			{#each $lq__event_presentation_obj_li as event_presentation_obj}
				<li class="space-y-2 border border-gray-200 p-2 rounded-md">
					<div class="float-right space-2 flex flex-row items-center">
						{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
							<button
								type="button"
								onclick={() => {
									console.log('Add Presenter');
									if (
										!confirm(
											'Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.'
										)
									) {
										return;
									}

									let presenter_data = {
										event_presentation_id: event_presentation_obj?.event_presentation_id,
										given_name: 'New',
										family_name: 'Presenter',
										email: 'test+newpres@oneskyit.com',
										code: 'new_presenter',
										enable: true
									};

									events_func.create_ae_obj__event_presenter({
										api_cfg: $ae_api,
										event_id: $events_slct.event_id,
										event_session_id: $events_slct.event_session_id,
										event_presentation_id: event_presentation_obj.event_presentation_id,
										data_kv: presenter_data,
										log_lvl: 1
									});
								}}
								class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
							>
								<span class="fas fa-plus mx-1"></span>
								Add Presenter
							</button>
						{/if}
					</div>

					<h4 class="h5 rounded-md p-2 preset-filled-surface-300-700">
						<span
							class:hidden={!event_presentation_obj.start_datetime ||
								$events_loc.pres_mgmt.hide__presentation_datetime}
							class="text-base border-r-2 border-gray-800/50 px-1"
						>
							{ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, 'dddd')}
							@
							<!-- , -->
							<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
							{ae_util.iso_datetime_formatter(
								event_presentation_obj.start_datetime,
								$events_loc.pres_mgmt.time_format
							)}
						</span>

						<Element_ae_crud
							api_cfg={$ae_api}
							object_type={'event_presentation'}
							object_id={event_presentation_obj?.event_presentation_id}
							field_name={'name'}
							field_type={'text'}
							field_value={event_presentation_obj?.name}
							allow_null={false}
							hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
							outline_element={false}
							show_crud={false}
							display_inline={true}
							display_block_edit={true}
							class_li={''}
							on:ae_crud_updated={(e) => {
								console.log(`ae_crud_updated:`, e.detail);

								events_func
									.load_ae_obj_id__event_presentation({
										api_cfg: $ae_api,
										event_presentation_id: event_presentation_obj.event_presentation_id,
										log_lvl: 1
									})
									.then(function (load_results) {})
									.then(function (load_results) {
										// $events_trigger = 'load__event_presentation_obj_id';
										// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
									});
							}}
						>
							<!-- <strong class="text-sm">Name/Title:</strong> -->
							<span class="italic">
								{event_presentation_obj?.name}
							</span>
						</Element_ae_crud>
						<!-- "{event_presentation_obj.name}" -->

						<Element_ae_crud
							api_cfg={$ae_api}
							object_type={'event_presentation'}
							object_id={event_presentation_obj?.event_presentation_id}
							field_name={'code'}
							field_type={'text'}
							field_value={event_presentation_obj?.code}
							allow_null={false}
							hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
							outline_element={false}
							show_crud={false}
							display_inline={true}
							display_block_edit={true}
							class_li={''}
							on:ae_crud_updated={(e) => {
								console.log(`ae_crud_updated:`, e.detail);

								events_func
									.load_ae_obj_id__event_presentation({
										api_cfg: $ae_api,
										event_presentation_id: event_presentation_obj.event_presentation_id,
										log_lvl: 1
									})
									.then(function (load_results) {})
									.then(function (load_results) {
										// $events_trigger = 'load__event_presentation_obj_id';
										// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
									});
							}}
						>
							{#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !$events_loc.pres_mgmt.hide__presentation_code}
								<span
									class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
									title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}"
								>
									<span class="fas fa-barcode"></span>
									{event_presentation_obj?.code ?? ''}
									{event_presentation_obj?.abstract_code ?? ''}
								</span>
							{:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
								<span class="text-sm text-semibold text-success-800-400">
									<span class="fas fa-barcode"></span>
									Code:
									<span class="" title="No code provided for this presentation">
										{@html event_presentation_obj?.code ?? ae_snip.html__not_set}
									</span>
								</span>
							{/if}
						</Element_ae_crud>
						<!-- Can not edit the abstract code here at this time. -->
					</h4>

					<div class:hidden={!($ae_loc.trusted_access && $ae_loc.edit_mode)}>
						<span class="text-sm text-semibold text-success-800-400">
							Date &
							<button
								type="button"
								onclick={() => {
									if ($events_loc.pres_mgmt.time_hours == 12) {
										$events_loc.pres_mgmt.time_hours = 24;
										$events_loc.pres_mgmt.datetime_format = 'datetime_long';
										$events_loc.pres_mgmt.time_format = 'time_short';
									} else {
										$events_loc.pres_mgmt.time_hours = 12;
										$events_loc.pres_mgmt.datetime_format = 'datetime_12_long';
										$events_loc.pres_mgmt.time_format = 'time_12_short';
									}
								}}
							>
								time
							</button>
							:</span
						>
						<span class="fas fa-calendar-alt text-success-800-400"></span>
						<Element_ae_crud
							api_cfg={$ae_api}
							object_type={'event_presentation'}
							object_id={event_presentation_obj?.event_presentation_id}
							field_name={'start_datetime'}
							field_type={'datetime'}
							field_value={event_presentation_obj.start_datetime}
							allow_null={false}
							hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
							outline_element={false}
							show_crud={false}
							display_inline={true}
							class_li={''}
							on:ae_crud_updated={(e) => {
								console.log(`ae_crud_updated:`, e.detail);

								events_func.load_ae_obj_id__event_presentation({
									api_cfg: $ae_api,
									event_presentation_id: event_presentation_obj?.event_presentation_id
								});
								// $events_trigger = 'load__event_presentation_obj_id';
								// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
							}}
						>
							{ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, 'dddd')}
							<!-- , -->
							<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
							{ae_util.iso_datetime_formatter(
								event_presentation_obj.start_datetime,
								$events_loc.pres_mgmt.time_format
							)}
						</Element_ae_crud>
						-
						<Element_ae_crud
							api_cfg={$ae_api}
							object_type={'event_presentation'}
							object_id={event_presentation_obj?.event_presentation_id}
							field_name={'end_datetime'}
							field_type={'datetime'}
							field_value={event_presentation_obj.end_datetime}
							allow_null={false}
							hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
							outline_element={false}
							show_crud={false}
							display_inline={true}
							class_li={''}
							on:ae_crud_updated={(e) => {
								console.log(`ae_crud_updated:`, e.detail);

								events_func.load_ae_obj_id__event_presentation({
									api_cfg: $ae_api,
									event_presentation_id: event_presentation_obj?.event_presentation_id
								});
								// $events_trigger = 'load__event_presentation_obj_id';
								// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
							}}
						>
							{ae_util.iso_datetime_formatter(
								event_presentation_obj.end_datetime,
								$events_loc.pres_mgmt.time_format
							)}
						</Element_ae_crud>
					</div>

					<div
						class:hidden={!$events_loc.pres_mgmt.show_content__presentation_description &&
							!($ae_loc.trusted_access && $ae_loc.edit_mode)}
					>
						<Element_ae_crud
							api_cfg={$ae_api}
							object_type={'event_presentation'}
							object_id={event_presentation_obj?.event_presentation_id}
							field_name={'description'}
							field_type={'textarea'}
							field_value={event_presentation_obj?.description}
							allow_null={false}
							hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
							outline_element={false}
							show_crud={false}
							display_inline={true}
							display_block_edit={true}
							textarea_rows={15}
							class_li={''}
							on:ae_crud_updated={(e) => {
								console.log(`ae_crud_updated:`, e.detail);

								events_func.load_ae_obj_id__event_presentation({
									api_cfg: $ae_api,
									event_presentation_id: event_presentation_obj.event_presentation_id,
									log_lvl: 1
								});
							}}
						>
							<span class="text-sm text-semibold text-success-800-400"> Description: </span>

							{#if event_presentation_obj?.description}
								<button
									type="button"
									onclick={() => {
										console.log('Show/Hide Description');
										if (
											$events_sess.pres_mgmt.show_content__presentation_description ==
											event_presentation_obj.event_presentation_id
										) {
											$events_sess.pres_mgmt.show_content__presentation_description = null;

											// Was testing with LiveQuery
											$events_slct.event_presentation_id = null;
										} else {
											$events_sess.pres_mgmt.show_content__presentation_description =
												event_presentation_obj.event_presentation_id;

											// Was testing with LiveQuery
											$events_slct.event_presentation_id =
												event_presentation_obj.event_presentation_id;
										}
									}}
									class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
								>
									{#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id}
										<span class="fas fa-eye-slash mx-1"></span>
										<span>Hide Description</span>
									{:else}
										<span class="fas fa-eye mx-1"></span>
										<span>Show</span>
									{/if}
								</button>

								<pre
									class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
									class:hidden={$events_sess.pres_mgmt.show_content__presentation_description !==
										event_presentation_obj.event_presentation_id}>{event_presentation_obj.description}</pre>
							{:else}
								{@html ae_snip.html__not_set}
							{/if}
							<!-- {:else}
            <div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
                class:hidden={!$ae_loc.administrator_access}
                >
                <span class="fas fa-exclamation-triangle mx-1"></span>
                No description provided.
            </div>
        {/if} -->
						</Element_ae_crud>
					</div>

					<!-- Show presenters for this presentation -->
					{#if event_presentation_obj?.event_presentation_id}
						<Comp_event_presenter_obj_li
							link_to_type={'event_presentation'}
							link_to_id={event_presentation_obj?.event_presentation_id}
							event_presenter_id_random_li={[]}
							log_lvl={2}
						></Comp_event_presenter_obj_li>
					{/if}

					<!-- Show files for this presentation -->
					<Element_manage_event_file_li_wrap
						link_to_type={'event_presentation'}
						link_to_id={event_presentation_obj?.event_presentation_id}
						allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] ||
							$events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
						allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
						container_class_li={''}
					/>
				</li>
			{/each}
		</ul>
	{:else}
		<!-- <p class:hidden={display_mode != 'default'}>
        No presentations available to show at this time
    </p> -->
	{/if}
</section>
