<script lang="ts">
// *** Import Svelte specific

// *** Import other supporting libraries
import { Bug, CircleX, Info, ToggleLeft, ToggleRight, X } from '@lucide/svelte';

// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';

// *** Setup Svelte properties
interface Props {
    log_lvl?: number;
    hide?: null | boolean;
    expand?: boolean;
}

let {
    log_lvl = $bindable(0),
    hide = $bindable(false),
    expand = $bindable(false)
}: Props = $props();
</script>

<!-- App Debug Menu -->
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<section
    class="
        ae_app__debug_menu

        hidden-print
        md:text-md
        lg:text-md xl:text-md transition-delay-1000

        transition-duration-1000
        absolute bottom-0 left-0 z-50 mx-1 my-2

        flex max-h-min
        max-w-lg border-2
        border-red-300 bg-red-100/60

        text-sm transition-all
        ease-in
        hover:border-red-500
        hover:bg-red-200
        sm:text-sm
        2xl:text-lg
        dark:border-red-700


        dark:bg-red-800/50
        dark:text-slate-400 hover:dark:border-red-500
        hover:dark:bg-red-900 dark:hover:text-slate-200
        "
    class:top-0={expand}
    class:w-full={expand}
    class:hidden={hide}
    class:border-transparent={!expand}
    class:dark:border-transparent={!expand}
    class:hover:border-transparent={!expand}
    class:hover:bg-transparent={!expand}>
    <div
        class:hidden={!expand}
        class:border-red-200={expand}
        class:dark:border-red-800={expand}
        class="

            transition-delay-1000
            transition-duration-1000
            relative
            overflow-y-auto
            px-1
            py-4 opacity-50
            transition-all
            ease-in
            hover:opacity-100
            ">
        <!-- flex flex-col items-center justify-center max-h-full outline -->
        <div>
            <!-- <span class="fas fa-bug mx-1"></span> -->
            <Bug class="mx-1 inline-block" />
            <span>Debug</span>
        </div>

        <pre class="text-xs">
            {JSON.stringify($ae_loc, null, 2)}
        </pre>
    </div>

    <span
        class="absolute top-0 right-0 flex flex-row items-center justify-center gap-1">
        <button
            type="button"
            onclick={() => {
                console.log('Debug ae_loc:', $ae_loc);
                $ae_loc.debug_mode = !$ae_loc?.debug_mode;
            }}
            class="
                btn btn-sm
                preset-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-success
                transition-all
                "
            title="Turn debug content and styles off and on">
            {#if $ae_loc?.debug_mode}
                <!-- <span class="fas fa-toggle-on mx-1"></span> -->
                <ToggleRight
                    strokeWidth="2.5"
                    color="green"
                    class="mx-1 inline-block" />
                <span>Debug</span>
                <span class="hidden"> Mode On </span>
            {:else}
                <!-- <span class="fas fa-toggle-off mx-1"></span> -->
                <ToggleLeft
                    strokeWidth="1"
                    color="gray"
                    class="mx-1 inline-block" />
                <span>Debug?</span>
                <span class="hidden"> Mode Off </span>
            {/if}
            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
            <!-- <ToggleRight class="inline-block mx-1" /> -->
            <!-- <X class="inline-block mx-1" /> -->
        </button>

        <button
            type="button"
            onclick={() => {
                if (log_lvl) {
                    console.log('Showing quick info/debug menu.');
                }
                expand = false;
                $ae_sess.debug_menu.hide_quick_info = false;
            }}
            title="Show Quick Info"
            class="
                btn btn-sm
                preset-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-success
                transition-all
                ">
            <!-- <span class="fas fa-info-circle mx-1"></span> -->
            <Info class="mx-1 inline-block" />
            Quick Info
        </button>

        <button
            type="button"
            onclick={() => {
                console.log('Debug ae_loc:', $ae_loc);
                // $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
                expand = !expand;
            }}
            class="
                btn btn-sm
                preset-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-warning
                transition-all
                "
            title="Turn debug content and styles off and on">
            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
            <!-- <ToggleRight class="inline-block mx-1" /> -->
            <CircleX class="mx-1 inline-block" />
            <span class="hidden"> Close </span>
            <span>Debug</span>
        </button>
    </span>

    <button
        type="button"
        onclick={() => {
            console.log('Debug ae_loc:', $ae_loc);
            // $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
            expand = !expand;
        }}
        id="AE-Quick-Debug"
        class="
            btn btn-icon
            preset-outlined-surface-100-900
            hover:preset-filled-warning-100-900
            fixed
            bottom-8

            left-2
            p-1 text-xs text-neutral-300
            transition-all hover:text-neutral-800
            dark:text-neutral-700 dark:hover:text-neutral-200
            "
        title="Turn debug content and styles off and on">
        <!-- absolute bottom-2 left-2 -->
        <!-- fixed bottom-0 left-0 -->
        &pi;
    </button>
</section>
