<script lang="ts">
	interface Props {
		data: any;
		lq__event_obj: any;
	}

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

	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 {
		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/element_ae_crud.svelte';
	import Element_data_store from '$lib/elements/element_data_store_v2.svelte';
	import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';

	let ae_tmp: key_val = {};
	let ae_triggers: key_val = {};
</script>

<!-- New standard page specific menu 2024-08-02 -->
<div
	class="pres_mgmt__event_reports {ae_snip.classes__events_pres_mgmt_menu}"
	class:border-gray-100={!$events_loc.pres_mgmt.show_menu__event_reports}
>
	<!-- BEGIN: The menu button options -->
	<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
		<Comp__events_menu_nav
			hide={!$ae_loc.authenticated_access}
			event_id={$lq__event_obj?.event_id}
			ae_core={$ae_loc.administrator_access}
			events__locations={$ae_loc.trusted_access}
			events__session_search={$events_slct.event_id}
		/>

		<span class="ae_menu__object_options flex flex-row items-center justify-around">
			<!-- Button to toggle between showing and not showing the extended options menu -->
			<button
				type="button"
				onclick={() => {
					if ($events_loc.pres_mgmt.show_menu__event_reports == 'options') {
						$events_loc.pres_mgmt.show_menu__event_reports = null;
					} else {
						$events_loc.pres_mgmt.show_menu__event_reports = 'options';
					}
				}}
				class={ae_snip.classes__events_pres_mgmt_menu__button}
				class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_menu__event_reports ==
					'options'}
				class:preset-tonal-secondary={$events_loc.pres_mgmt.show_menu__event_reports != 'options'}
				class:hidden={!$ae_loc.trusted_access}
				title="Options for the presenter"
			>
				<span class="fas fa-cog m-1"></span>
				{#if $events_loc.pres_mgmt.show_menu__event_reports == 'options'}
					Hide
				{:else}
					<span class="hidden"> Show </span>
				{/if}
				Options?
			</button>

			<button
				type="button"
				onclick={() => {
					if ($events_loc.pres_mgmt.show_menu__event_reports == 'help') {
						$events_loc.pres_mgmt.show_menu__event_reports = null;
					} else {
						$events_loc.pres_mgmt.show_menu__event_reports = 'help';
					}
				}}
				class={ae_snip.classes__events_pres_mgmt_menu__button}
				class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_menu__event_reports == 'help'}
				class:preset-tonal-secondary={$events_loc.pres_mgmt.show_menu__event_reports != 'help'}
				title="Help and information about the reports"
			>
				<span class="fas fa-question-circle mx-1"></span>
				{#if $events_loc.pres_mgmt.show_menu__event_reports == 'help'}
					Hide Help?
				{:else}
					Help?
				{/if}
			</button>
		</span>
	</div>
	<!-- END: The menu button options -->

	<!-- BEGIN: The expanded menu area for information and options -->
	<div
		class="
            flex flex-row items-center justify-around
            w-full
            p-2 rounded-md
            bg-blue-100 hover:bg-blue-200
            dark:bg-blue-900 hover:dark:bg-blue-800
            border border-blue-200 hover:border-blue-400
            "
		class:hidden={$events_loc.pres_mgmt.show_menu__event_reports != 'options'}
	>
		{#if $ae_loc.authenticated_access}
			<div class="flex flex-col gap-1 items-end w-56">
				<!-- Max presenters select options -->
				<span class="flex flex-row gap-1 items-center justify-around">
					<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}
						onchange={() => {
							// search__event_presenter({
							//     api_cfg: $ae_api,
							//     event_id: $events_slct.event_id,
							//     agree: true,
							//     biography: null,
							//     ft_search_str: '',
							//     lk_search_str: '',
							//     params: {
							//         'qry__enabled': 'enabled',
							//         'qry__hidden': 'not_hidden',
							//         'qry__limit': $events_loc.pres_mgmt.qry_limit__presenters,},
							//     try_cache: false,
							//     log_lvl: log_lvl,
							// });
						}}
						class="select w-20 text-sm"
					>
						<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">
					<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}
						onchange={() => {
							// search__event_presenter({
							//     api_cfg: $ae_api,
							//     event_id: $events_slct.event_id,
							//     agree: true,
							//     biography: null,
							//     ft_search_str: '',
							//     lk_search_str: '',
							//     params: {
							//         'qry__enabled': 'enabled',
							//         'qry__hidden': 'not_hidden',
							//         'qry__limit': $events_loc.pres_mgmt.qry_limit__sessions,},
							//     try_cache: false,
							//     log_lvl: log_lvl,
							// });
						}}
						class="select w-20 text-sm"
					>
						<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">
					<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}
						onchange={() => {
							// search__event_presenter({
							//     api_cfg: $ae_api,
							//     event_id: $events_slct.event_id,
							//     agree: true,
							//     biography: null,
							//     ft_search_str: '',
							//     lk_search_str: '',
							//     params: {
							//         'qry__enabled': 'enabled',
							//         'qry__hidden': 'not_hidden',
							//         'qry__limit': $events_loc.pres_mgmt.qry_limit__sessions,},
							//     try_cache: false,
							//     log_lvl: log_lvl,
							// });
						}}
						class="select w-20 text-sm"
					>
						<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>
			</div>
		{/if}

		{#if $ae_loc.authenticated_access}
			<div class="flex flex-col gap-1 items-center">
				<!-- Button to toggle between the showing additional hidden download buttons -->
				{#if $events_loc.pres_mgmt.show__direct_download}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.show__direct_download =
								!$events_loc.pres_mgmt.show__direct_download;
						}}
						class="btn btn-sm preset-tonal-success border border-success-500"
						title="Hide additional direct download and copy link buttons?"
					>
						<span class="fas fa-eye-slash m-1"></span>
						Hide Download Buttons?
					</button>
				{:else}
					<button
						type="button"
						onclick={() => {
							$events_loc.pres_mgmt.show__direct_download =
								!$events_loc.pres_mgmt.show__direct_download;
						}}
						class="btn btn-sm preset-tonal-warning border border-warning-500"
						title="Show additional direct download and copy link buttons?"
					>
						<span class="fas fa-eye m-1"></span>
						Show Download Buttons?
					</button>
				{/if}

				<!-- Button to toggle between the showing hidden sessions -->
				{#if $events_loc.pres_mgmt.qry_hidden == 'all'}
					<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 preset-tonal-success border border-success-500"
						title="Hide sessions marked as hidden?"
					>
						<span class="fas fa-eye-slash m-1"></span>
						Hide Sessions?
					</button>
				{:else}
					<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 preset-tonal-warning border border-warning-500"
						title="Show all (hidden) sessions?"
					>
						<span class="fas fa-eye m-1"></span>
						Show All (Hidden) Sessions?
					</button>
				{/if}

				{#if $ae_loc.manager_access}
					{#if $events_loc.pres_mgmt.qry_enabled == 'all'}
						<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 preset-tonal-success border border-success-500"
							title="Hide disabled sessions?"
						>
							<span class="fas fa-eye-slash m-1"></span>
							Hide Disabled Sessions?
						</button>
					{:else}
						<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 preset-tonal-warning border border-warning-500"
							title="Show disabled sessions?"
						>
							<span class="fas fa-eye m-1"></span>
							Show All (Disabled) Sessions?
						</button>
					{/if}
				{/if}
			</div>
		{/if}
	</div>
	<!-- END: The expanded menu area for information and options -->

	<Element_data_store
		ds_code="events__pres_mgmt__reports_help"
		ds_name="Default: Events - Pres Mgmt Event Reports Help"
		ds_type="html"
		for_type="event"
		for_id={$events_slct.event_id}
		class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md max-w-xl"
		show_edit={false}
		show_edit_btn={true}
		hide={$events_loc.pres_mgmt.show_menu__event_reports != 'help'}
	/>

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