<script lang="ts">
	interface Props {
		data: any;
		log_lvl?: number;
		// export let event_session_id: string;
		lq__event_session_obj: any;
		lq__auth__event_presenter_obj: any;
	}

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

	import { goto } from '$app/navigation';

	import type { key_val } from '$lib/stores/ae_stores';
	import {
		ae_snip,
		ae_loc,
		ae_sess,
		ae_api,
		ae_trig,
		slct,
		slct_trigger
	} from '$lib/stores/ae_stores';
	import { core_func } from '$lib/ae_core/ae_core_functions';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger,
		events_trig_kv
	} from '$lib/stores/ae_events_stores';
	import { events_func } from '$lib/ae_events_functions';

	import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
	import Element_data_store from '$lib/elements/element_data_store_v2.svelte';
	import Sign_in_out from '../../sign_in_out.svelte';
	import Comp__events_menu_nav from '../../../ae_comp__events_menu_nav.svelte';
	// import Comp__global_menu_opts from '$lib/ae_comp__global_menu_opts.svelte';
	import Comp__pres_mgmt_menu_opts from '../../../ae_comp__events_menu_opts.svelte';

	// Variables
	let ae_promises: key_val = {};
	let ae_tmp: key_val = $state({});
	let ae_triggers: key_val = $state({});
</script>

<!-- New standard page specific menu 2025-06-20 -->
<div class="pres_mgmt__session_menu ae_container_module_menu">
	<!-- BEGIN: The menu button options -->
	<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
		<!-- launcher_id is the event_location_id -->
		<Comp__events_menu_nav
			hide={false}
			event_id={$lq__event_session_obj?.event_id}
			events__reports={$lq__event_session_obj?.event_id && $ae_loc.trusted_access}
			events__session_search={$lq__event_session_obj?.event_id}
			events__launcher_id={$lq__event_session_obj?.event_location_id && $ae_loc.administrator_access
				? $lq__event_session_obj?.event_location_id
				: null}
			events__location_id={$lq__event_session_obj?.event_location_id && $ae_loc.trusted_access
				? $lq__event_session_obj?.event_location_id
				: null}
			events__locations={$ae_loc.administrator_access}
		/>

		<span
			class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
		>
			<!-- Button to toggle between the regular session view and managing session files -->
			<button
				type="button"
				onclick={() => {
					if ($events_loc.pres_mgmt.show_content__session_view == 'manage_files') {
						$events_loc.pres_mgmt.show_content__session_view = null;
					} else {
						$events_loc.pres_mgmt.show_content__session_view = 'manage_files';
					}
				}}
				class={ae_snip.classes__events_pres_mgmt_menu__button_special}
				class:preset-filled-primary-500={$events_loc.pres_mgmt.show_content__session_view ==
					'manage_files'}
				class:preset-tonal-primary={$events_loc.pres_mgmt.show_content__session_view !=
					'manage_files'}
				class:hidden={!$ae_loc.public_access || 1 == 1}
				title="Manage files for the session"
			>
				{#if $events_loc.pres_mgmt.show_content__session_view == 'manage_files'}
					<span class="fas fa-users m-1"></span>
					<!-- View Details -->
					Session Presenters?
				{:else}
					<span class="fas fa-file-archive m-1"></span>
					Session Files?
					<span
						class="badge badge-icon preset-tonal-success absolute -top-1.5 -right-1.5 z-10"
						class:hidden={!$lq__event_session_obj?.file_count}
					>
						{$lq__event_session_obj?.file_count}×
					</span>
				{/if}
			</button>

			<button
				type="button"
				onclick={() => {
					if ($events_loc.pres_mgmt.show_menu__session == 'options') {
						$events_loc.pres_mgmt.show_menu__session = null;
					} else {
						$events_loc.pres_mgmt.show_menu__session = 'options';
					}
				}}
				class="btn btn-sm mx-1"
				class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__session == 'options'}
				class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session != 'options'}
				class:hidden={!$ae_loc.trusted_access}
				title="Options for the session"
			>
				<span class="fas fa-cog m-1"></span>
				{#if $events_loc.pres_mgmt.show_menu__session == 'options'}
					Hide
				{:else}
					Show
				{/if}
				Options?
			</button>

			<button
				type="button"
				onclick={() => {
					if ($events_loc.pres_mgmt.show_menu__session == 'help') {
						$events_loc.pres_mgmt.show_menu__session = null;
					} else {
						$events_loc.pres_mgmt.show_menu__session = 'help';
					}
				}}
				class="btn btn-sm mx-1"
				class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__session == 'help'}
				class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session != 'help'}
				title="Help and information about the session"
			>
				<span class="fas fa-question-circle m-1"></span>
				{#if $events_loc.pres_mgmt.show_menu__session == 'help'}
					Hide Help?
				{:else}
					Help?
				{/if}
			</button>
		</span>

		<span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
			{#if $lq__event_session_obj?.event_id}
				<!-- The Sign_in_out component is usually just a button for Sign Out if they are signed in as a POC or presenter. -->
				<Sign_in_out
					{data}
					event_session_id={$lq__event_session_obj?.event_id}
					{lq__event_session_obj}
					{lq__auth__event_presenter_obj}
				/>
			{/if}
		</span>
	</div>
	<!-- END: The menu button options -->

	<!-- BEGIN: The expanded menu area for information and options -->
	<div
		class:ae_container_module_options={$events_loc.pres_mgmt.show_menu__session == 'options'}
		class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
	>
		<div class="ae_comp__session_menu_opts w-full">
			<h2 class="text-sm font-semibold text-center pb-1">Æ Session Menu Options</h2>

			<div class="flex flex-row flex-wrap gap-1 items-center justify-between">
				<div class="flex flex-row gap-1 items-center justify-evenly relative">
					<!-- Toggle alert status -->
					<button
						type="button"
						onclick={() => {
							console.log('Toggle alert status for the session.');

							let new_alert_value = !$lq__event_session_obj?.alert;
							console.log('New alert value:', new_alert_value);

							ae_promises.api_update__ae_obj = core_func
								.update_ae_obj_id_crud_v2({
									api_cfg: $ae_api,
									object_type: 'event_session',
									object_id: $lq__event_session_obj?.event_session_id_random,
									object_reload: true,
									field_name: 'alert',
									new_field_value: new_alert_value,
									log_lvl: 1
								})
								.then(function (results) {})
								.finally(function () {});
						}}
						class:opacity-100={$lq__event_session_obj?.alert}
						class:opacity-50={!$lq__event_session_obj?.alert}
						class="
                            btn btn-sm
                            preset-tonal-warning hover:preset-tonal-error
                            preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
                            hover:opacity-100
                            transition-all
                            "
						title={$lq__event_session_obj?.alert ? 'Remove alert status' : 'Mark as alert'}
					>
						{#if $lq__event_session_obj?.alert}
							<!-- class="fas fa-exclamation-triangle" -->
							<span
								class="fas fa-bell-slash m-0.75 text-warning-600"
								title="This session is marked as an alert."
							></span>
						{:else}
							<span
								class="fas fa-bell m-0.75 text-gray-400"
								title="This session is not marked as an alert."
							></span>
						{/if}
						<span class="hidden">Toggle Alert</span>
					</button>

					<Element_ae_crud
						trigger_patch={ae_triggers.hide_event_launcher}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={$lq__event_session_obj?.event_session_id}
						field_name={'hide_event_launcher'}
						field_type={'button'}
						field_value={ae_tmp.value__hide_event_launcher}
						allow_null={false}
						hide_edit_btn={true}
						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_session({
								api_cfg: $ae_api,
								event_session_id: $lq__event_session_obj?.event_session_id,
								log_lvl: log_lvl
							});
						}}
					>
						<button
							onclick={() => {
								ae_tmp.value__hide_event_launcher = !$lq__event_session_obj?.hide_event_launcher;

								ae_triggers.hide_event_launcher = true;
							}}
							class="btn btn-sm m-1 group"
							class:ae_btn_surface_outlined={!$lq__event_session_obj?.hide_event_launcher}
							class:ae_btn_success={$lq__event_session_obj?.hide_event_launcher}
							disabled={!$ae_loc.trusted_access}
							title={$lq__event_session_obj?.hide_event_launcher
								? 'Not showing in the Launcher. Unhide from the Launcher?'
								: 'Currently showing in the Launcher. Hide from the Launcher?'}
						>
							{#if $lq__event_session_obj?.hide_event_launcher}
								<span class="fas fa-toggle-on m-1"></span>
								Unhide from Launcher
							{:else}
								<!-- <span class="fas fa-toggle-off m-1"></span> -->
								<span class="fas fa-paper-plane m-1"></span>
								<span class="hidden group-hover:inline"> Hide from Launcher </span>
							{/if}
							<!-- {@html ($lq__event_session_obj?.hide_event_launcher ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
						</button>
					</Element_ae_crud>
				</div>

				<div class="flex flex-row flex-wrap gap-1 items-center justify-evenly">
					<Element_ae_crud
						trigger_patch={ae_triggers.priority}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={$lq__event_session_obj?.event_session_id}
						field_name={'priority'}
						field_type={'button'}
						field_value={ae_tmp.value__priority}
						allow_null={true}
						hide_edit_btn={true}
						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_session({
								api_cfg: $ae_api,
								event_session_id: $lq__event_session_obj?.event_session_id,
								log_lvl: log_lvl
							});
						}}
					>
						<!-- {@html $lq__event_session_obj?.priority ? '<span class="fas fa-star m-1"></span> High Priority' : '<span class="far fa-star m-1"></span> Priority not set'} -->
						<button
							onclick={() => {
								ae_tmp.value__priority = !$lq__event_session_obj?.priority;

								// $events_slct.exhibit_tracking_obj.priority = !$lq__event_session_obj?.priority;
								ae_triggers.priority = true;
							}}
							class="btn btn-sm *:hover:inline"
							class:ae_btn_surface_outlined={!$lq__event_session_obj?.priority}
							class:ae_btn_success={$lq__event_session_obj?.priority}
						>
							{#if $lq__event_session_obj?.priority}
								<span class="fas fa-star m-1"></span>
								<!-- <span class="fas fa-arrow-down m-1"></span> -->
								<span class="hidden"> Not Priority? </span>
							{:else}
								<!-- <span class="fas fa-toggle-off m-1"></span> -->
								<span class="far fa-star m-1"></span>
								<span class="hidden"> Priority </span>
								?
							{/if}
						</button>
					</Element_ae_crud>

					<Element_ae_crud
						trigger_patch={ae_triggers.hide}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={$lq__event_session_obj?.event_session_id}
						field_name={'hide'}
						field_type={'button'}
						field_value={ae_tmp.value__hide}
						allow_null={false}
						hide_edit_btn={true}
						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_session({
								api_cfg: $ae_api,
								event_session_id: $lq__event_session_obj?.event_session_id,
								log_lvl: log_lvl
							});
						}}
					>
						<!-- {($lq__event_session_obj?.hide ? 'Hidden' : 'Not Hidden')} -->
						<button
							onclick={() => {
								ae_tmp.value__hide = !$lq__event_session_obj?.hide;

								// $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
								ae_triggers.hide = true;
							}}
							class="btn btn-sm *:hover:inline"
							class:ae_btn_success_outlined={!$lq__event_session_obj?.hide}
							class:ae_btn_warning={$lq__event_session_obj?.hide}
							disabled={!$ae_loc.trusted_access}
						>
							{#if $lq__event_session_obj?.hide}
								<span class="fas fa-toggle-on m-1"></span>
								Unhide?
							{:else}
								<!-- <span class="fas fa-toggle-off m-1"></span> -->
								<span class="fas fa-eye m-1"></span>
								<span class="hidden"> Not Hidden </span>
							{/if}
							<!-- {@html ($lq__event_session_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
						</button>
					</Element_ae_crud>

					<!-- Enable/Disable -->
					<Element_ae_crud
						trigger_patch={ae_triggers.enable}
						api_cfg={$ae_api}
						object_type={'event_session'}
						object_id={$lq__event_session_obj?.event_session_id}
						field_name={'enable'}
						field_type={'button'}
						field_value={ae_tmp.value__enable}
						allow_null={false}
						hide_edit_btn={true}
						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_session({
									api_cfg: $ae_api,
									event_session_id: $lq__event_session_obj?.event_session_id,
									log_lvl: log_lvl
								})
								.then(function (load_results) {
									// Maybe reload page?
									// window.location.reload();
								});
						}}
					>
						<!-- {($lq__event_session_obj?.enable ? 'Enabled' : 'Disabled')} -->
						<button
							onclick={() => {
								ae_tmp.value__enable = !$lq__event_session_obj?.enable;

								// $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
								ae_triggers.enable = true;
							}}
							class="btn btn-sm"
							class:ae_btn_success_outlined={$lq__event_session_obj?.enable}
							class:ae_btn_error={!$lq__event_session_obj?.enable}
							disabled={!$ae_loc.manager_access}
						>
							{#if $lq__event_session_obj?.enable}
								<span class="fas fa-toggle-on m-1"></span>
								Enabled
							{:else}
								<span class="fas fa-toggle-off m-1"></span>
								Enable?
							{/if}
							<!-- {@html ($lq__event_session_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable?' : '<span class="fas fa-toggle-off m-1"></span> Enable?')} -->
						</button>
					</Element_ae_crud>

					<!-- Sort -->

					<!-- Group -->

					{#if $ae_loc.manager_access}
						<button
							onclick={() => {
								if (!confirm('Are you sure you want to delete this session?')) {
									return false;
								}

								events_func
									.delete_ae_obj_id__event_session({
										api_cfg: $ae_api,
										event_session_id: $lq__event_session_obj.event_session_id,
										method: 'delete'
									})
									.then(function (delete_results) {
										$events_slct.event_session_id = null;
										$events_slct.event_session_obj = {};

										goto(
											`/events/${$lq__event_session_obj.event_id}/session/${$lq__event_session_obj.event_session_id}`
										);
									});
							}}
							class="btn btn-sm mx-1 ae_btn_error"
							type="button"
							title="Delete record permanently"
						>
							<span class="fas fa-minus-circle mx-1"></span>
							Delete
						</button>
					{:else if $ae_loc.administrator_access}
						<button
							onclick={() => {
								if (
									!confirm(
										'Are you sure you want to remove (disable) this session? This is not common.'
									)
								) {
									return false;
								}
								events_func
									.delete_ae_obj_id__event_session({
										api_cfg: $ae_api,
										event_session_id: $lq__event_session_obj.event_session_id,
										method: 'disable'
									})
									.then(function (delete_results) {
										$events_slct.event_session_id = null;
										$events_slct.event_session_obj = {};

										goto(`/events/${$lq__event_session_obj.event_id}`);
									});
							}}
							class="btn btn-sm mx-1 ae_btn_warning"
							type="button"
							title="Disable record"
						>
							<span class="fas fa-minus mx-1"></span>
							Delete
						</button>
					{/if}
				</div>
			</div>
		</div>

		<Comp__pres_mgmt_menu_opts hide={!$ae_loc.authenticated_access} />
	</div>
	<!-- END: The expanded menu area for information and options -->

	<Element_data_store
		ds_code="events__pres_mgmt__session_help"
		ds_name="Default: Events - Pres Mgmt Session Help"
		ds_type="html"
		for_type="event"
		for_id={$lq__event_session_obj?.event_id}
		class_li="ae_container_module_help"
		show_edit={false}
		show_edit_btn={true}
		hide={$events_loc.pres_mgmt.show_menu__session != 'help'}
	/>

	<div>
		<button
			type="button"
			onclick={() => {
				$events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
			}}
			class="btn btn-sm mx-1 ae_btn_info_filled"
			class:hidden={!$events_loc.pres_mgmt.show_menu__session}
			title="Collapse the expanded menu"
		>
			<span class="fas fa-chevron-up m-1"></span>
			{#if $events_loc.pres_mgmt.show_menu__session}
				Hide
				<!-- Collapse -->
			{:else}
				Show
			{/if}
			<!-- Menu? -->
		</button>
	</div>
</div>
<!-- End of the new standard page specific menu -->
