<script lang="ts">
	interface Props {
		log_lvl?: number;
	}

	let { log_lvl = 0 }: Props = $props();

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

<div
	class="
        w-full max-w-md
        flex flex-col gap-2 items-center justify-start
        "
>
	<div class="w-full flex flex-row items-center justify-between">
		<h2 class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
			Launcher Configuration
		</h2>

		<button
			onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
			class="btn btn-icon dark:text-white"
		>
			<span class="fas fa-times"></span>
			<span class="sr-only">Close Config</span>
		</button>
	</div>

	<!-- <hr class="w-full my-2 border-1 border-gray-200 dark:border-gray-800 " /> -->

	<section
		class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__controller}
		class="controller w-full preset-outlined-surface-300-700 transition-all"
	>
		<h3 class="text-center mb-2 text-sm font-semibold">
			<button
				onclick={() => {
					$events_loc.launcher.show_section__controller =
						!$events_loc.launcher.show_section__controller;
				}}
				class="btn btn-sm w-full justify-between"
			>
				{#if $events_loc.launcher.show_section__controller}
					<span class="fas fa-chevron-down"></span>
				{:else}
					<span class="fas fa-chevron-right"></span>
				{/if}
				Controller:
				{$events_loc.launcher?.controller ?? '-- not set --'}
				({$events_loc.launcher.controller_group_code ?? '-- not set --'})
				{#if $events_sess.launcher.ws_connect_status == 'connected'}
					<span>
						<span class="fas fa-sitemap m-1 text-green-700"></span>
						<!-- <span class="fas fa-signal m-1"></span> -->
						WS
					</span>
				{:else}
					<span>
						<span class="fas fa-times m-1 text-red-700"></span>
						<span class="fas fa-plug"></span>
						WS
					</span>
				{/if}
			</button>
		</h3>

		<div class:hidden={!$events_loc.launcher.show_section__controller}>
			<div class="flex flex-row gap-1 p-0.5">
				<select
					bind:value={$events_loc.launcher.controller}
					class="input select text-sm preset-tonal-surface"
				>
					<option value="local">Local Only</option>
					<option value="remote">Remotely WS Controlled</option>
					<option value="local_push">Local and WS Controller</option>
				</select>
			</div>
			<div class="flex flex-row gap-1 p-0.5">
				<input
					bind:value={$events_loc.launcher.controller_group_code}
					placeholder="Controller group code"
					class="input preset-tonal-surface text-sm"
					ondblclick={() => {
						$events_sess.launcher.controller_unlock_group_code =
							!$events_sess.launcher.controller_unlock_group_code;

						if ($events_loc.launcher.ws_connect) {
							$events_sess.launcher.trigger__ws_disconnect = true;
						} else {
							// $events_sess.launcher.trigger__ws_connect = true;
						}
						// $events_loc.launcher.ws_connect = false;
					}}
					readonly={!$events_sess.launcher.controller_unlock_group_code}
				/>

				<button
					onclick={() => {
						if ($events_loc.launcher.ws_connect) {
							// console.log('HERE!!! Triggering WS disconnect');
							// NOTE: When the ws_disconnect is finished, it should set ws_connect to false.
							// $events_loc.launcher.ws_connect = false;
							$events_sess.launcher.trigger__ws_disconnect = true;
						} else {
							// console.log('HERE!!! Triggering WS connect');
							// NOTE: We need to set ws_connect to true so that it will show the WS element.
							$events_loc.launcher.ws_connect = true;
							$events_sess.launcher.trigger__ws_connect = true;
						}

						$events_sess.launcher.controller_unlock_group_code = false;
						(($events_sess.launcher.controller_cmd = null),
							($events_sess.launcher.controller_trigger_send = null));
					}}
					class="btn btn-sm hover:preset-filled-primary-500"
					class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
					class:preset-tonal-success={$events_loc.launcher.ws_connect}
				>
					{#if $events_loc.launcher.ws_connect}
						<!-- <span class="fas fa-signal m-1"></span> -->
						Disconnect?
					{:else}
						<!-- <span class="fas fa-plug m-1"></span> -->
						Connect?
					{/if}
				</button>

				{#if $events_loc.launcher.ws_connect}
					<button
						onclick={() => {
							$events_sess.launcher.controller_unlock_group_code = false;
							$events_sess.launcher.controller_cmd = 'ae_refresh:now';
							$events_sess.launcher.controller_trigger_send = 'trigger';
						}}
						class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
					>
						Send Group Reload
					</button>
				{/if}
			</div>
		</div>
	</section>

	<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->

	<section
		class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__screen_saver}
		class="screen_saver w-full preset-outlined-surface-300-700 transition-all"
	>
		<h3 class="text-center mb-2 text-sm font-semibold w-full">
			<button
				onclick={() => {
					$events_loc.launcher.show_section__screen_saver =
						!$events_loc.launcher.show_section__screen_saver;
				}}
				class="btn btn-sm w-full justify-between"
			>
				<span>
					{#if $events_loc.launcher.show_section__screen_saver}
						<span class="fas fa-chevron-down"></span>
					{:else}
						<span class="fas fa-chevron-right"></span>
					{/if}
					Screen Saver
				</span>
				{$events_loc.launcher.idle_timer
					? ($events_loc.launcher.idle_timer / 60000).toPrecision(4) + ' min'
					: '-- not set --'}
			</button>
		</h3>

		<div
			class="flex flex-col gap-1 items-center justify-start w-full"
			class:hidden={!$events_loc.launcher.show_section__screen_saver}
		>
			<!-- Run screen saver after idle time exceeded $events_loc.launcher.idle_timer = 4 * 60 * 1000  -->
			<label class="flex flex-row gap-1 items-center justify-start text-sm">
				<span class="w-36">Idle Time (ms):</span>
				<input
					type="number"
					min={3000}
					bind:value={$events_loc.launcher.idle_timer}
					class="input input-sm w-28 text-right preset-tonal-surface"
				/>
			</label>

			<!-- How often is idle checked? $events_loc.launcher.idle_cycle = 5 * 1000 -->
			<label class="flex flex-row gap-1 items-center justify-start text-sm">
				<span class="w-36">Cycle Check (ms):</span>
				<input
					type="number"
					min={500}
					bind:value={$events_loc.launcher.idle_cycle}
					class="input input-sm w-28 text-right preset-tonal-surface"
				/>
			</label>

			<!-- How often the image changes? $events_loc.launcher.idle_loop_period = 1 * 60 * 1000 -->
			<label class="flex flex-row gap-1 items-center justify-start text-sm">
				<span class="w-36">Image Change Period (ms):</span>
				<input
					type="number"
					min={750}
					bind:value={$events_loc.launcher.idle_loop_period}
					class="input input-sm w-28 text-right preset-tonal-surface"
				/>
			</label>

			<!-- Future options: Show caption for X seconds -->
		</div>
	</section>

	<!-- <hr class="w-full my-2 border-1 border-gray-200 dark:border-gray-800 " /> -->

	<!-- App Modes: default (browser), onsite (browser onsite), native (Electron app onsite) -->
	<!-- Related Open Methods: modal, file default/onsite/native, URL -->
	<!--
* modal: same for all modes; audio, images, video only
* file:
    * default download with regular filename and extension
    * onsite download with modified extension
    * native Electron caching and open method (download to cache, copy and then open)
* URL: new browser window
-->
	<section
		class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__app_modes}
		class="app_modes w-full preset-outlined-surface-300-700 transition-all"
	>
		<h3 class="text-center mb-2 text-sm font-semibold">
			<button
				onclick={() => {
					$events_loc.launcher.show_section__app_modes =
						!$events_loc.launcher.show_section__app_modes;
				}}
				class="btn btn-sm w-full justify-between"
			>
				<span>
					{#if $events_loc.launcher.show_section__app_modes}
						<span class="fas fa-chevron-down"></span>
					{:else}
						<span class="fas fa-chevron-right"></span>
					{/if}
					App Modes
				</span>
				{$events_loc.launcher.app_mode ?? '-- not set --'}
			</button>
		</h3>

		<div
			class="flex flex-col gap-1 items-center justify-start w-full"
			class:hidden={!$events_loc.launcher.show_section__app_modes}
		>
			<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
				{#if !$events_loc.launcher.app_mode || $events_loc.launcher.app_mode != 'default'}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.app_mode = 'default';
							// ae_event_launcher.set($events_loc.launcher);
							console.log($events_loc.launcher);
						}}
						title="Switch to default web browser mode"
					>
						Change to Default Mode
					</button>
				{/if}
				{#if $events_loc.launcher.app_mode != 'native'}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.app_mode = 'native';
							// ae_event_launcher.set($ae_event_launcher);
							console.log($events_loc.launcher);
						}}
						title="Switch to native app mode"
					>
						Change to App Mode
					</button>
				{/if}
				{#if $events_loc.launcher.app_mode != 'onsite'}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.app_mode = 'onsite';
							// ae_event_launcher.set($ae_event_launcher);
							console.log($events_loc.launcher);
						}}
						title="Switch to onsite mode"
					>
						Change to Onsite Mode
					</button>
				{/if}
			</div>

			<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
				{#if $events_loc.launcher.hide__launcher_menu}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_menu = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show launcher menu"
					>
						Show Launcher Menu
					</button>
				{/if}
				{#if !$events_loc.launcher.hide__launcher_header}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_header = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide launcher header"
					>
						Hide Launcher Header
					</button>
				{/if}
				{#if $events_loc.launcher.hide__launcher_header}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_header = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show launcher header"
					>
						Show Launcher Header
					</button>
				{/if}

				{#if !$events_loc.launcher.hide__launcher_footer}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_footer = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide launcher footer"
					>
						Hide Launcher Footer
					</button>
				{/if}
				{#if $events_loc.launcher.hide__launcher_footer}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_footer = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show launcher footer"
					>
						Show Launcher Footer
					</button>
				{/if}

				<!-- Show/Hide Launcher Menu -->
				{#if !$events_loc.launcher.hide__launcher_menu}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__launcher_menu = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide launcher menu"
					>
						Hide Launcher Menu
					</button>
				{/if}
				<!-- Show/Hide Session Start/End Datetimes hide__session_datetimes -->
				{#if !$events_loc.launcher.hide__session_datetimes}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__session_datetimes = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide session start/end datetimes"
					>
						Hide Session Datetimes
					</button>
				{/if}
				{#if $events_loc.launcher.hide__session_datetimes}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__session_datetimes = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show session start/end datetimes"
					>
						Show Session Datetimes
					</button>
				{/if}

				<button
					type="button"
					onclick={() => {
						if ($events_loc.launcher.time_format == 'time_12_short') {
							// $events_loc.launcher.datetime_format = 'datetime_long';
							$events_loc.launcher.time_format = 'time_short';
							$events_loc.launcher.time_hours = 24;
						} else {
							$events_loc.launcher.time_format = 'time_12_short';
							// $events_loc.launcher.datetime_format = 'datetime_12_long';
							$events_loc.launcher.time_hours = 12;
						}
					}}
					class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
				>
					Time Format:
					{#if $events_loc.launcher.time_format == 'time_12_short'}
						12-hour
					{:else}
						24-hour
					{/if}
				</button>

				<!-- Show/Hide Websocket element hide__ws_element -->
				{#if !$events_loc.launcher.hide__ws_element}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__ws_element = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide WebSocket element"
					>
						Hide WebSocket Element
					</button>
				{/if}
				{#if $events_loc.launcher.hide__ws_element}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__ws_element = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show WebSocket element"
					>
						Show WebSocket Element
					</button>
				{/if}

				<!-- Show/Hide modal header title hide__modal_header_title -->
				{#if !$events_loc.launcher.hide__modal_header_title}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__modal_header_title = true;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Hide modal header title"
					>
						Hide Modal Header Title
					</button>
				{/if}
				{#if $events_loc.launcher.hide__modal_header_title}
					<button
						class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
						onclick={() => {
							$events_loc.launcher.hide__modal_header_title = false;
							// ae_event_launcher.set($ae_event_launcher);
							// console.log($events_loc.launcher);
						}}
						title="Show modal header title"
					>
						Show Modal Header Title
					</button>
				{/if}
			</div>
		</div>
	</section>

	<section
		class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__local_cfg_refresh}
		class="local_cfg_refresh w-full preset-outlined-surface-300-700 transition-all"
	>
		<h3 class="text-center mb-2 text-sm font-semibold">
			<button
				onclick={() => {
					$events_loc.launcher.show_section__local_cfg_refresh =
						!$events_loc.launcher.show_section__local_cfg_refresh;
				}}
				class="btn btn-sm w-full justify-between"
			>
				<span>
					{#if $events_loc.launcher.show_section__local_cfg_refresh}
						<span class="fas fa-chevron-down"></span>
					{:else}
						<span class="fas fa-chevron-right"></span>
					{/if}
					Other Local Config and Caches
				</span>
			</button>
		</h3>

		<!-- delete IDB tables, local storage, etc -->
		<div
			class="flex flex-col gap-1 items-center justify-start w-full"
			class:hidden={!$events_loc.launcher.show_section__local_cfg_refresh}
		>
			<div class="flex flex-col gap-1 items-center justify-start w-full">
				<select
					class="input w-full preset-tonal-surface text-sm"
					onchange={(event) => {
						const val = (event.target as HTMLSelectElement).value;
						if (val && val != '') {
							if (val == 'delete_idbs') {
								// Delete all IDB tables
								if (
									confirm(
										'Are you sure you want to delete ALL IndexedDB databases? This will log you out of the app and you will need to reload the app.'
									)
								) {
									// continue
								} else {
									(event.target as HTMLSelectElement).value = '';
									return false;
								}

								indexedDB.deleteDatabase('ae_archives_db'); // Archives module
								indexedDB.deleteDatabase('ae_core_db');
								indexedDB.deleteDatabase('ae_events_db'); // Events module
								indexedDB.deleteDatabase('ae_journals_db'); // Journals module
								indexedDB.deleteDatabase('ae_posts_db'); // Posts module
								indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module

								alert('All IndexedDB databases deleted. Please reload the app.');
							} else if (val == 'delete_idbs_events') {
								// Delete Event IDB tables
								if (
									confirm(
										'Are you sure you want to delete ONLY the Events IndexedDB database? This will log you out of the app and you will need to reload the app.'
									)
								) {
									// continue
								} else {
									(event.target as HTMLSelectElement).value = '';
									return false;
								}

								indexedDB.deleteDatabase('ae_events_db'); // Events module
								alert('Events IndexedDB database deleted. Please reload the app.');
							} else if (val == 'delete_local') {
								// Delete all local config
								if (
									confirm(
										'Are you sure you want to delete ALL local config in localStorage? This will log you out of the app and you will need to reload the app.'
									)
								) {
									// continue
								} else {
									(event.target as HTMLSelectElement).value = '';
									return false;
								}

								localStorage.removeItem('ae_loc');
								localStorage.removeItem('ae_events_loc');
								localStorage.removeItem('ae_idaa_loc');
								localStorage.removeItem('ae_journals_loc');
								location.reload();
							} else if (val == 'delete_local_events') {
								// Delete local config for Events
								if (
									confirm(
										'Are you sure you want to delete ONLY the Events local config in localStorage? This will log you out of the app and you will need to reload the app.'
									)
								) {
									// continue
								} else {
									(event.target as HTMLSelectElement).value = '';
									return false;
								}

								localStorage.removeItem('ae_events_loc');
								// localStorage.removeItem('ae_event_cfg_' + $lq__event_obj?.event_id);
								// localStorage.removeItem('ae_event_launcher_' + $lq__event_obj?.event_id);
								location.reload();
							}

							(event.target as HTMLSelectElement).value = '';
						}
					}}
				>
					<option value="">-- select an option --</option>
					<option value="delete_idbs">Delete all IDB tables</option>
					<option value="delete_idbs_events">Delete Events IDB tables</option>
					<option value="delete_local">Delete all local config</option>
					<option value="delete_local_events">Delete local config for Events</option>
				</select>
				<span class="text-xs text-gray-500 dark:text-gray-400">
					The action happens when the option is selected
				</span>
			</div>

			<div class="flex flex-row gap-1 items-center justify-center w-full">
				<!-- $ae_loc.sys_menu.hide -->
				<button
					type="button"
					onclick={() => ($ae_loc.sys_menu.hide = !$ae_loc.sys_menu.hide)}
					class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
					title="Show or hide the Aether system menu (global)"
				>
					{#if !$ae_loc.sys_menu.hide}
						<span class="fas fa-times"></span>
						Hide Sys Menu
					{:else}
						<span class="fas fa-cog"></span>
						Show Sys Menu
					{/if}
				</button>

				<!-- $ae_loc.debug_menu.hide -->
				<button
					type="button"
					onclick={() => ($ae_loc.debug_menu.hide = !$ae_loc.debug_menu.hide)}
					class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
					title="Show or hide the Aether debug menu (global)"
				>
					{#if !$ae_loc.debug_menu.hide}
						<span class="fas fa-times"></span>
						Hide Debug Menu
					{:else}
						<span class="fas fa-bug"></span>
						Show Debug Menu
					{/if}
				</button>
			</div>

			<div class="text-xs text-gray-500 dark:text-gray-400">API: {$ae_api.base_url}</div>
		</div>
	</section>

	<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->

	<div class="text-center">
		<button
			type="button"
			onclick={() => ($events_loc.launcher.hide_drawer__debug = false)}
			class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
		>
			<span class="fas fa-bug"></span>
			Debug
		</button>

		<button
			type="button"
			onclick={() => location.reload()}
			class="btn btn-sm p-1 preset-tonal-secondary hover:preset-filled-secondary-500"
		>
			<span class="fas fa-sync-alt"></span>
			Reload Page
		</button>
	</div>
</div>
