<script lang="ts">
export let log_lvl: number = 0;
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';

// import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
</script>


<div class="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
        on:click={() => ($events_loc.launcher.hide_drawer__cfg = true)}
        class="pb-4 pl-4 dark:text-white"
        >
        <span class="fas fa-times"></span>
    </button>
</div>


<hr>

<section class="controller">
    <h3
        class="text-center mb-4 text-sm font-semibold"
        >
        <button
            on:click={() => {
                $events_loc.launcher.show_section__controller = !$events_loc.launcher.show_section__controller;
            }}
            class="ae_btn btn_sm btn_seamless"
            >
            Controller:
            {$events_loc.launcher?.controller ?? '-- not set --'}
            ({$events_loc.launcher.controller_group_code ?? '-- not set --'})
            {#if $events_sess.launcher.ws_connect_status == 'connected'}
                <span class="fas fa-sitemap m-1"></span>
                <!-- <span class="fas fa-signal m-1"></span> -->
            {:else}
                <span class="fas fa-times m-1"></span>
            {/if}
            {#if $events_loc.launcher.show_section__controller}
                <span class="fas fa-chevron-down"></span>
            {:else}
                <span class="fas fa-chevron-right"></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="select"
            >
                <option value="local">Local Only</option>
                <option value="remote">Remotely Controlled</option>
                <option value="local_push">Local and 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"
                on:dblclick={() => {
                    $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
                on:click={() => {
                    $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
                    on:click={() => {
                        $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>


<h3
    class="text-center mb-4 text-sm font-semibold"
    >
    Screen Saver
</h3>


<hr>


<!-- 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="app_modes">
    <h3
        class="text-center mb-4 text-sm font-semibold"
        >
        <button
            on:click={() => {
                $events_loc.launcher.show_section__app_modes = !$events_loc.launcher.show_section__app_modes;
            }}
            class="ae_btn btn_sm btn_seamless"
            >
            App Modes:
            {$events_loc.launcher.app_mode ?? '-- not set --'}
            {#if $events_loc.launcher.show_section__app_modes}
                <span class="fas fa-chevron-down"></span>
            {:else}
                <span class="fas fa-chevron-right"></span>
            {/if}
        </button>
    </h3>

    <div
        class="grid grid-cols-2 gap-2"
        class:hidden={!$events_loc.launcher.show_section__app_modes}
        >

        {#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"
                on:click={() => {
                    $events_loc.launcher.app_mode='default';
                    // ae_event_launcher.set($events_loc.launcher);
                    console.log($events_loc.launcher);
                }}
                title="Switch to default 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"
                on:click={() => {
                    $events_loc.launcher.app_mode='native';
                    // ae_event_launcher.set($ae_event_launcher);
                    console.log($events_loc.launcher);
                }}
                title="Switch to native 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"
                on:click={() => {
                    $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}


        {#if $events_loc.launcher.hide__launcher_menu}
            <button
                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
                on:click={() => {
                    $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_menu}
            <button
                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
                on:click={() => {
                    $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}

    </div>
</section>



<h3
    class="text-center mb-4 text-sm font-semibold"
    >
    Local Config Refresh
</h3>



<hr />


<div class="text-center">
    <button
        type="button"
        on:click={() => ($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>
</div>
