<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/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig } from '$lib/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"
        >
            <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"
            ondblclick={() => {
                $events_sess.launcher.controller_unlock_group_code = !$events_sess.launcher.controller_unlock_group_code;

                $events_loc.launcher.ws_connect = false;
            }}
            readonly={!$events_sess.launcher.controller_unlock_group_code}
            >

        <button
            onclick={() => {
                $events_loc.launcher.ws_connect = !$events_loc.launcher.ws_connect;
                $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"
        >
        <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-24 text-right"
            >
    </label>

    <!-- How often is idle checked? $events_loc.launcher.idle_cycle = 5 * 1000 -->
     <label
        class="flex flex-row gap-1 items-center justify-start"
        >
        <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-24 text-right"
            >
    </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"
        >
        <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-24 text-right"
            >
    </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"
    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>

</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>