<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
        z-50
        absolute bottom-0 left-0

        flex
        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg

        dark:text-slate-400 dark:hover:text-slate-200
        bg-red-100/60 dark:bg-red-800/50
        hover:bg-red-200 hover:dark:bg-red-900

        mx-1 my-2
        max-h-min
        max-w-lg
        transition-all
        transition-delay-1000
        transition-duration-1000
        ease-in


        border-2
        border-red-300 dark:border-red-700
        hover:border-red-500 hover:dark:border-red-500
        "
	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-all
            transition-delay-1000
            transition-duration-1000
            ease-in
            overflow-y-auto
            px-1 py-4
            opacity-50
            hover:opacity-100
            relative
            "
	>
		<!-- flex flex-col items-center justify-center max-h-full outline -->
		<div>
			<!-- <span class="fas fa-bug mx-1"></span> -->
			<Bug class="inline-block mx-1" />
			<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 gap-1 items-center justify-center">
		<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="inline-block mx-1" />
				<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="inline-block mx-1" />
				<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="inline-block mx-1" />
			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="inline-block mx-1" />
			<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
            text-xs
            p-1
            preset-outlined-surface-100-900
            hover:preset-filled-warning-100-900

            transition-all
            fixed bottom-8 left-2
            text-neutral-300 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>
