<script lang="ts">
	interface Props {
		hide?: boolean;
	}

	let { hide = true }: Props = $props();

	import {
		ae_snip,
		ae_loc,
		ae_sess,
		ae_api,
		ae_trig,
		slct,
		slct_trigger
	} from '$lib/stores/ae_stores';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger,
		events_trig_kv
	} from '$lib/stores/ae_events_stores';
</script>

<!-- New standard events module menu 2025-06-20 -->
<div class="ae_comp__pres_mgmt_menu_opts w-full border-t border-gray-300 mt-1" class:hidden={hide}>
	<h2 class="text-sm font-semibold text-center pb-1">
		<button
			type="button"
			onclick={() => {
				$events_loc.pres_mgmt.hide__menu_opts = !$events_loc.pres_mgmt.hide__menu_opts;
			}}
			class="btn btn-sm preset-tonal-info border border-info-500"
		>
			{#if $events_loc.pres_mgmt.hide__menu_opts}
				<span class="fas fa-chevron-up m-1"></span>
			{:else}
				<span class="fas fa-chevron-down m-1"></span>
			{/if}
			Æ Pres Mgmt Menu Options
			{#if $events_loc.pres_mgmt.hide__menu_opts}
				<span class="fas fa-chevron-up m-1"></span>
			{:else}
				<span class="fas fa-chevron-down m-1"></span>
			{/if}
		</button>
	</h2>

	<div
		class="flex flex-row flex-wrap gap-1 items-center justify-between"
		class:hidden={$events_loc.pres_mgmt.hide__menu_opts}
	>
		{#if $ae_loc.authenticated_access}
			<div class="flex flex-col gap-1 items-end justify-center">
				<span class="flex flex-col gap-1 items-end justify-center">
					<!-- Max person select options -->
					<span class="flex flex-row gap-1 items-center justify-around w-full">
						<label class="text-sm w-32 text-right" for="qry_limit__people"> Max people: </label>
						<!-- Not using: $events_loc.pres_mgmt.qry_limit__people -->
						<select
							id="qry_limit__people"
							bind:value={$ae_loc.person.qry_limit__people}
							class="select w-20 text-sm preset-tonal-surface px-1"
						>
							<option value="">-- not set --</option>
							<option value={25}>25</option>
							<option value={50}>50</option>
							<option value={75}>75</option>
							<option value={100}>100</option>
							<option value={150}>150</option>
							<option value={200}>200</option>
							<option value={250}>250</option>
							<option value={500}>500</option>
							<option value={750}>750</option>
							<option value={1000}>1000</option>
						</select>
					</span>

					<!-- Max presenters select options -->
					<span class="flex flex-row gap-1 items-center justify-around w-full">
						<label class="text-sm w-32 text-right" for="qry_limit__presenters">
							Max presenters:
						</label>
						<select
							id="qry_limit__presenters"
							bind:value={$events_loc.pres_mgmt.qry_limit__presenters}
							class="select w-20 text-sm preset-tonal-surface px-1"
						>
							<option value="">-- not set --</option>
							<option value={25}>25</option>
							<option value={50}>50</option>
							<option value={75}>75</option>
							<option value={100}>100</option>
							<option value={150}>150</option>
							<option value={200}>200</option>
							<option value={250}>250</option>
							<option value={300}>300</option>
							<option value={500}>500</option>
							<option value={750}>750</option>
							<option value={1000}>1000</option>
						</select>
					</span>

					<!-- Max sessions select options -->
					<span class="flex flex-row gap-1 items-center justify-around w-full">
						<label class="text-sm w-32 text-right" for="qry_limit__sessions"> Max sessions: </label>
						<select
							id="qry_limit__sessions"
							bind:value={$events_loc.pres_mgmt.qry_limit__sessions}
							class="select w-20 text-sm preset-tonal-surface px-1"
						>
							<option value="">-- not set --</option>
							<option value={25}>25</option>
							<option value={50}>50</option>
							<option value={75}>75</option>
							<option value={100}>100</option>
							<option value={200}>200</option>
							<option value={500}>500</option>
						</select>
					</span>

					<!-- Max files select options -->
					<span class="flex flex-row gap-1 items-center justify-around w-full">
						<label class="text-sm w-32 text-right" for="qry_limit__files"> Max files: </label>
						<select
							id="qry_limit__files"
							bind:value={$events_loc.pres_mgmt.qry_limit__files}
							class="select w-20 text-sm preset-tonal-surface px-1"
						>
							<option value="">-- not set --</option>
							<option value={25}>25</option>
							<option value={50}>50</option>
							<option value={75}>75</option>
							<option value={100}>100</option>
							<option value={200}>200</option>
							<option value={500}>500</option>
						</select>
					</span>
				</span>

				<span class="flex flex-col gap-1 items-end justify-center">
					<!-- Toggle between the showing hidden sessions -->
					<!-- qry_hidden = all, not_hidden, hidden -->
					<button
						type="button"
						onclick={() => {
							if ($events_loc.pres_mgmt.qry_hidden == 'all') {
								$events_loc.pres_mgmt.qry_hidden = 'not_hidden';
							} else {
								$events_loc.pres_mgmt.qry_hidden = 'all';
							}
						}}
						class="btn btn-sm ae_btn_surface justify-between w-full text-center"
						title="Toggle between showing hidden sessions"
					>
						<span
							class="fas {$events_loc.pres_mgmt.qry_hidden == 'all'
								? 'fa-toggle-on'
								: 'fa-toggle-off'} m-1"
						></span>
						{#if $events_loc.pres_mgmt.qry_hidden == 'all'}
							<span class="grow">
								<span class="fas fa-eye-slash m-1"></span>
								Hide Hidden Sessions
							</span>
						{:else}
							<span class="grow">
								<span class="fas fa-eye m-1"></span>
								Show Hidden Sessions?
							</span>
						{/if}
					</button>

					<!-- Toggle between the showing disabled sessions -->
					<!-- qry_enabled = all, enabled -->
					{#if $ae_loc.manager_access}
						<button
							type="button"
							onclick={() => {
								if ($events_loc.pres_mgmt.qry_enabled == 'all') {
									$events_loc.pres_mgmt.qry_enabled = 'enabled';
								} else {
									$events_loc.pres_mgmt.qry_enabled = 'all';
								}
							}}
							class="btn btn-sm ae_btn_surface justify-between w-full text-center"
							title="Toggle between showing disabled sessions"
						>
							<span
								class="fas {$events_loc.pres_mgmt.qry_enabled == 'all'
									? 'fa-toggle-on'
									: 'fa-toggle-off'} m-1"
							></span>
							{#if $events_loc.pres_mgmt.qry_enabled == 'all'}
								<span class="grow">
									<span class="fas fa-ban m-1"></span>
									Hide Disabled Sessions
								</span>
							{:else}
								<span class="grow">
									<span class="fas fa-check-circle m-1"></span>
									Show Disabled Sessions?
								</span>
							{/if}
						</button>
					{/if}
				</span>
			</div>
		{/if}

		<div class="flex flex-col flex-wrap gap-1 items-center justify-evenly">
			<button
				type="button"
				onclick={() => {
					$events_loc.pres_mgmt.save_search_text = !$events_loc.pres_mgmt.save_search_text;
				}}
				class="btn btn-sm justify-between w-full text-center"
				class:ae_btn_surface={$events_loc.pres_mgmt.save_search_text}
				class:ae_btn_surface_outlined={!$events_loc.pres_mgmt.save_search_text}
				title="Save the search text for this session search?"
			>
				{#if $events_loc.pres_mgmt.save_search_text}
					<span class="fas fa-toggle-on m-1"></span>
					<span class="grow">
						<span class="fas fa-save m-1"></span>
						Do Not Save Search?
					</span>
				{:else}
					<span class="fas fa-toggle-off m-1"></span>
					<span class="grow">
						<span class="fas fa-save m-1"></span>
						Save Search Text?
					</span>
				{/if}
			</button>

			{#if $ae_loc.authenticated_access}
				{#if !$events_loc.pres_mgmt.hide__session_msg}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.hide__session_msg = true;
						}}
						class="btn btn-sm ae_btn_surface justify-between w-full text-center"
					>
						<span class="fas fa-toggle-on m-1"></span>
						<span class="grow">
							<span class="fas fa-sticky-note m-1"></span>
							Hide Session Message
						</span>
					</button>
				{:else}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.hide__session_msg = false;
						}}
						class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
					>
						<span class="fas fa-toggle-off m-1"></span>
						<span class="grow">
							<span class="fas fa-sticky-note m-1"></span>
							Show Session Message?
						</span>
					</button>
				{/if}
			{/if}

			{#if $ae_loc.authenticated_access}
				<!-- Show or hide the session code -->
				{#if !$events_loc.pres_mgmt.hide__session_code}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.hide__session_code = true;
						}}
						class="btn btn-sm ae_btn_surface justify-between w-full text-center"
					>
						<span class="fas fa-toggle-on m-1"></span>
						<span class="grow">
							<span class="fas fa-barcode m-1"></span>
							Hide Session Code
						</span>
					</button>
				{:else}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.hide__session_code = false;
						}}
						class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
					>
						<span class="fas fa-toggle-off m-1"></span>
						<span class="grow">
							<span class="fas fa-barcode m-1"></span>
							Show Session Code?
						</span>
					</button>
				{/if}
			{/if}
		</div>

		<div class="flex flex-col gap-1 items-center justify-center">
			{#if $ae_loc.trusted_access}
				<div class="flex flex-col gap-1 items-center justify-center">
					{#if $events_loc.pres_mgmt.show__copy_access_link}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show__copy_access_link = false;
							}}
							class="btn btn-sm w-full ae_btn_surface"
						>
							<span class="fas fa-toggle-on m-1"></span>
							Showing Copy Access Link
						</button>
					{:else}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show__copy_access_link = true;
							}}
							class="btn btn-sm w-full ae_btn_surface_outlined"
						>
							<span class="fas fa-toggle-off m-1"></span>
							Show Copy Access Link?
						</button>
					{/if}

					{#if $events_loc.pres_mgmt.show__email_access_link}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show__email_access_link = false;
							}}
							class="btn btn-sm w-full ae_btn_surface"
						>
							<span class="fas fa-toggle-on m-1"></span>
							Showing Email Access Link
						</button>
					{:else}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show__email_access_link = true;
							}}
							class="btn btn-sm w-full ae_btn_surface_outlined"
						>
							<span class="fas fa-toggle-off m-1"></span>
							Show Email Access Link?
						</button>
					{/if}
				</div>
			{/if}

			{#if $ae_loc.authenticated_access}
				<div class="flex flex-col gap-1 items-end justify-center">
					{#if $events_loc.pres_mgmt.show_content__session_qr}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_qr = false;
							}}
							class="btn btn-sm ae_btn_surface justify-between w-full text-center"
							title="Showing Session QR Code"
						>
							<span class="fas fa-toggle-on m-1"></span>
							<span class="grow">
								<span class="fas fa-qrcode m-1"></span>
								Hide Session QR
							</span>
						</button>
					{:else}
						<button
							type="button"
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_qr = true;
							}}
							class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
							title="Show Session QR Code"
						>
							<span class="fas fa-toggle-off m-1"></span>
							<span class="grow">
								<span class="fas fa-qrcode m-1"></span>
								Show Session QR Code?
							</span>
						</button>
					{/if}

					{#if $events_loc.pres_mgmt.show_content__presenter_qr}
						<button
							onclick={() => {
								$events_loc.pres_mgmt.show_content__presenter_qr = false;
							}}
							class="btn btn-sm ae_btn_surface justify-between w-full text-center"
							title="Showing Presenter QR Code"
						>
							<span class="fas fa-toggle-on m-1"></span>
							<span class="grow">
								<span class="fas fa-qrcode m-1"></span>
								Hide Presenter QR
							</span>
						</button>
					{:else}
						<button
							onclick={() => {
								$events_loc.pres_mgmt.show_content__presenter_qr = true;
							}}
							class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
							title="Show Presenter QR Code"
						>
							<span class="fas fa-toggle-off m-1"></span>
							<span class="grow">
								<span class="fas fa-qrcode m-1"></span>
								Show Presenter QR Code?
							</span>
						</button>
					{/if}
				</div>
			{/if}
		</div>

		{#if $ae_loc.authenticated_access}
			<div class="flex flex-col gap-1 items-center justify-center">
				<!-- Show/Hide launcher links (new version) -->
				<button
					type="button"
					onclick={() => {
						$events_loc.pres_mgmt.hide__launcher_link = !$events_loc.pres_mgmt.hide__launcher_link;
					}}
					class="btn btn-sm ae_btn_surface justify-between w-full text-center"
				>
					<span
						class="fas {$events_loc.pres_mgmt.hide__launcher_link
							? 'fa-toggle-off'
							: 'fa-toggle-on'} m-1"
					></span>
					<span class="grow">
						<span class="fas fa-plane m-1"></span>
						{$events_loc.pres_mgmt.hide__launcher_link
							? 'Show Launcher Links'
							: 'Hide Launcher Links?'}
					</span>
				</button>

				<!-- Show/Hide launcher links (legacy version) -->
				<button
					type="button"
					onclick={() => {
						$events_loc.pres_mgmt.hide__launcher_link_legacy =
							!$events_loc.pres_mgmt.hide__launcher_link_legacy;
					}}
					class="btn btn-sm ae_btn_surface justify-between w-full text-center"
				>
					<span
						class="fas {$events_loc.pres_mgmt.hide__launcher_link_legacy
							? 'fa-toggle-off'
							: 'fa-toggle-on'} m-1"
					></span>
					<span class="grow">
						<span class="fas fa-paper-plane m-1"></span>
						{$events_loc.pres_mgmt.hide__launcher_link_legacy
							? 'Show Legacy Launcher Links'
							: 'Hide Legacy Launcher Links?'}
					</span>
				</button>

				<!-- Show/Hide links to the location (room) -->
				<button
					type="button"
					onclick={() => {
						$events_loc.pres_mgmt.hide__location_link = !$events_loc.pres_mgmt.hide__location_link;
					}}
					class="btn btn-sm ae_btn_surface justify-between w-full text-center"
				>
					<span
						class="fas {$events_loc.pres_mgmt.hide__location_link
							? 'fa-toggle-off'
							: 'fa-toggle-on'} m-1"
					></span>
					<span class="grow">
						<span class="fas fa-map-marker-alt m-1"></span>
						{$events_loc.pres_mgmt.hide__location_link
							? 'Show Location Links'
							: 'Hide Location Links?'}
					</span>
				</button>

				<!-- Show/Hide the Location (room) column in tables and lists -->
				<button
					type="button"
					onclick={() => {
						$events_loc.pres_mgmt.hide__session_li_location_field =
							!$events_loc.pres_mgmt.hide__session_li_location_field;
					}}
					class="btn btn-sm ae_btn_surface justify-between w-full text-center"
					title="Toggle showing the Location column in session lists and tables"
				>
					<span
						class="fas {$events_loc.pres_mgmt.hide__session_li_location_field
							? 'fa-toggle-off'
							: 'fa-toggle-on'} m-1"
					></span>
					<span class="grow">
						<!-- <span class="fas fa-door-open m-1"></span> -->
						{$events_loc.pres_mgmt.hide__session_li_location_field
							? 'Show Location Column'
							: 'Hide Location Column?'}
					</span>
				</button>

				<!-- Show/Hide the POC column in tables and lists -->
				<button
					type="button"
					onclick={() => {
						$events_loc.pres_mgmt.hide__session_li_poc_field =
							!$events_loc.pres_mgmt.hide__session_li_poc_field;
					}}
					class="btn btn-sm ae_btn_surface justify-between w-full text-center"
					title="Toggle showing the POC column in session lists and tables"
				>
					<span
						class="fas {$events_loc.pres_mgmt.hide__session_li_poc_field
							? 'fa-toggle-off'
							: 'fa-toggle-on'} m-1"
					></span>
					<span class="grow">
						<!-- <span class="fas fa-user-tie m-1"></span> -->
						{$events_loc.pres_mgmt.hide__session_li_poc_field
							? 'Show POC Column'
							: 'Hide POC Column?'}
					</span>
				</button>

				<!-- These are related to more content showing in lists. -->
				<span class="flex flex-col flex-wrap gap-1 items-center justify-evenly">
					{#if $events_loc.pres_mgmt.show_content__session_files}
						<button
							disabled={!$ae_loc.manager_access}
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_files = false;
							}}
							class="btn btn-sm ae_btn_surface justify-between w-full text-center"
						>
							<span class="fas fa-toggle-on m-1"></span>
							<span class="grow">
								<span class="fas fa-list m-1"></span>
								Hide Linked Files (testing)
							</span>
						</button>
					{:else}
						<button
							disabled={!$ae_loc.manager_access}
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_files = true;
							}}
							class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
						>
							<span class="fas fa-toggle-off m-1"></span>
							<span class="grow">
								<span class="fas fa-list m-1"></span>
								Show Linked Files? (testing)
							</span>
						</button>
					{/if}

					{#if $events_loc.pres_mgmt.show_content__session_presentations}
						<button
							disabled={!$ae_loc.manager_access}
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_presentations = false;
							}}
							class="btn btn-sm ae_btn_surface justify-between w-full text-center"
						>
							<span class="fas fa-toggle-on m-1"></span>
							<span class="grow">
								<span class="fas fa-list m-1"></span>
								Hide Linked Presentations (testing)
							</span>
						</button>
					{:else}
						<button
							disabled={!$ae_loc.manager_access}
							onclick={() => {
								$events_loc.pres_mgmt.show_content__session_presentations = true;
							}}
							class="btn btn-sm ae_btn_surface_outlined justify-between w-full text-center"
						>
							<span class="fas fa-toggle-off m-1"></span>
							<span class="grow">
								<span class="fas fa-list m-1"></span>
								Show Linked Presentations? (testing)
							</span>
						</button>
					{/if}
				</span>
			</div>
		{/if}

		<div class="flex flex-row flex-wrap gap-1 items-center justify-evenly max-w-56">
			{#if $ae_loc?.trusted_access}
				{#if $ae_loc?.edit_mode}
					<button
						type="button"
						onclick={() => {
							$ae_loc.edit_mode = false;
						}}
						class="btn btn-sm ae_btn_warning justify-between w-full text-center"
						title="Turn off edit mode"
					>
						<span class="fas fa-toggle-on m-1"></span>
						<span class="grow">
							<span class="fas fa-edit m-1"></span>
							Edit Mode Off
						</span>
					</button>
				{:else}
					<button
						type="button"
						onclick={() => {
							$ae_loc.edit_mode = true;
						}}
						class="btn btn-sm ae_btn_warning_outlined justify-between w-full text-center"
						title="Turn on edit mode"
					>
						<span class="fas fa-toggle-off m-1"></span>
						<span class="grow">
							<span class="fas fa-user-ninja m-1"></span>
							Edit Mode?
						</span>
					</button>
				{/if}

				{#if $ae_loc?.adv_mode}
					<button
						type="button"
						onclick={() => {
							$ae_loc.adv_mode = false;
						}}
						class="btn btn-sm ae_btn_warning justify-between w-full text-center"
						title="Turn off advanced mode"
					>
						<span class="fas fa-toggle-on m-1"></span>
						<span class="grow">
							<span class="fas fa-magic m-1"></span>
							Advanced Mode Off
						</span>
					</button>
				{:else}
					<button
						type="button"
						onclick={() => {
							$ae_loc.adv_mode = true;
						}}
						class="btn btn-sm ae_btn_warning_outlined justify-between w-full text-center"
						title="Turn on advanced mode"
					>
						<span class="fas fa-toggle-off m-1"></span>
						<span class="grow">
							<span class="fas fa-hat-wizard m-1"></span>
							Advanced Mode?
						</span>
					</button>
				{/if}
			{/if}
		</div>
	</div>
</div>
