<script lang="ts">
// *** Import Svelte specific
import { tick } from 'svelte';
// import { goto, invalidateAll } from '$app/navigation';

// *** Import other supporting libraries
import {
    // ArrowBigRight,
    // Bug,
    CircleX,
    // Eye, EyeOff,
    // Key,
    // LogIn, LogOut, LockKeyhole,
    // Mail, MailCheck,
    Menu,
    // RefreshCw, RefreshCcwDot,
    ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
    // ToggleLeft, ToggleRight,
    User, UserCheck,
    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/ae_stores';

import Element_access_type from '$lib/e_app_access_type.svelte';
import Element_app_cfg from '$lib/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';

// *** Setup Svelte properties
interface Props {
    log_lvl?: number;
    data: any;
    show_sys_menu: boolean;
    hidden: null|boolean;
}

let {
    log_lvl = 0,
    data = null,
    show_sys_menu = false,
    hidden = true,
    }: Props = $props();

let trigger_clear_access: null|boolean = $state(null);
</script>


<!-- App System Menu -->
 <!-- min-h-full
max-h-max
min-w-full
max-w-max -->
<!-- <section
    class="
        ae_app__menu
        hidden-print
        flex flex-col
        items-end justify-center
        gap-1
        absolute right-0 bottom-16
        hover:bottom-6
        bg-white dark:bg-gray-800
        border border-transparent
        hover:border hover:border-gray-200 hover:dark:border-gray-700
        rounded-lg
        p-2
        *:hover:inline
        opacity-40
        hover:opacity-100
        duration-50 delay-1000 hover:delay-100 hover:ease-out
        transition hover:transition-all
        z-10 hover:z-20
    "
    class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
    > -->
<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
    <!-- !$ae_loc
    ?.app_cfg?.show_element__menu_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
    class="
        absolute bottom-6 right-0
        hidden-print

        w-min
        max-w-md

        opacity-60
        hover:opacity-100
        z-50

        flex flex-col-reverse gap-1
        items-end justify-center

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

        bg-transparent
        dark:text-slate-400 dark:hover:text-slate-200
        hover:bg-blue-200/50 hover:dark:bg-blue-900

        border-2
        border-blue-300/20 dark:border-blue-700
        hover:border-blue-500 hover:dark:border-blue-500

        transition-all
        delay-500 hover:delay-200
        duration-500 hover:duration-200
        ease-in-out
    "
    class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
    class:w-full={$ae_loc?.app_cfg?.show_element__menu}
    class:hidden={false}
    class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}

    class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
    >


<div
    class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
    class:border-green-200={$ae_loc?.show_element__menu}
    class:dark:border-green-800={$ae_loc?.show_element__menu}
    class="
        hidden-print
        flex flex-col items-end justify-end
        gap-1

        overflow-y-auto
        p-1

        w-full

        bg-white/10 dark:dark-gray-800/10
        hover:bg-red-100/50 dark:hover:bg-gray-800

        relative
        *:hover:inline
        *:hover:visible
        **:hover:visible

        opacity-50
        hover:opacity-100

        transition-all
        delay-1000 hover:delay-500
        duration-200 hover:duration-200
        ease-in-out
        "
    >

    {#if $ae_loc?.person_id || $ae_loc?.user_id}
    <span
        class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
        class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
        class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
        class="w-48"

        title="
        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
        Username: {$ae_loc?.user?.username ?? '-- not set --'}
        Email: {$ae_loc?.user?.email ?? '-- not set --'}
        "
        >
        <User class="mx-1 inline-block text-gray-500" />
        {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}<br />
        <!-- <ShieldUser /> -->
        <ShieldUser class="mx-1 inline-block text-gray-500" />
        {$ae_loc?.user?.username ?? '-- not set --'}<br />
    </span>
    {/if}



    {#if $ae_loc.edit_mode}
        <button
            type="button"
            onclick={() => {
                $ae_loc.edit_mode = false;
                // dispatch_edit_mode_changed();
            }}
            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all

            "
            title="Edit mode is currently enabled. Click to disable."
            >
            <span class=" *:hover:inline-block">
            <span class="fas fa-toggle-on mx-1 inline-block"></span>
            Edit
            <span class="hidden">
                Mode On
            </span>
            </span>
        </button>
    {:else if $ae_loc.authenticated_access}
        <button
            type="button"
            onclick={() => {
                $ae_loc.edit_mode = true;
                // dispatch_edit_mode_changed();
            }}
            class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
            title="Edit mode is currently disabled. Click to enable."
            >
            <span class="fas fa-toggle-off mx-1"></span>
            <span class="">Edit</span>
            <span class="hidden">
                Mode?
            </span>
        </button>
    {/if}

    <span>
        <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
                <span
                    class="*:hover:inline flex flex-row gap-1 items-center justify-between"
                    title={`Current access type/level: ${$ae_loc.access_type}`}
                    >
                    <!-- <span class="fas fa-unlock mx-1"></span> -->
                    <!-- <ShieldPlus class="inline-block" /> -->


                    {#if $ae_loc.access_type == 'super'}
                        <span class="fas fa-hat-wizard m-1"></span>
                        <span class="hidden">Super</span>
                    {:else if $ae_loc.access_type == 'manager'}
                        <span class="fas fa-user-shield m-1"></span>
                        <span class="hidden">Manager</span>
                    {:else if $ae_loc.access_type == 'administrator'}
                        <span class="fas fa-user-ninja m-1"></span>
                        <span class="hidden">Administrator</span>
                    {:else if $ae_loc.access_type == 'trusted'}
                        <span class="fas fa-user-check m-1"></span>
                        <span class="hidden">Trusted Access</span>
                    {:else if $ae_loc.access_type == 'public'}
                        Public
                        <span class="hidden">Access</span>
                    {:else if $ae_loc.access_type == 'authenticated'}
                        Authenticated
                        <span class="hidden">Access</span>
                    {:else if $ae_loc.access_type == 'anonymous'}
                        Anonymous Access
                    {:else}
                        Unknown Access
                    {/if}
                </span>

                {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
                    <button
                        type="button"
                        onclick={() => {
                            // handle_clear_access();
                            // trigger_clear_access = true;
                            // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;

                            if (!$ae_loc?.app_cfg?.show_element__menu) {
                                $ae_loc.app_cfg.show_element__menu = true;
                                // $ae_loc.app_cfg.show_element__menu_btn = false;
                                $ae_loc.app_cfg.show_element__access_type = true;
                                $ae_loc.app_cfg.show_element__passcode_input = true;
                            } else {
                                $ae_loc.app_cfg.show_element__menu = false;
                                // $ae_loc.app_cfg.show_element__menu_btn = true;
                            }
                        }}
                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
                        title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
                        >
                        <!-- <span class="fas fa-lock mx-1"></span> -->
                        <!-- <ShieldMinus /> -->
                        <ShieldEllipsis class="inline-block" />
                        <span class="hidden">Passcode?</span>

                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            trigger_clear_access = true;

                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
                                $ae_loc.app_cfg.show_element__menu = true;
                                $ae_loc.app_cfg.show_element__menu_btn = false;
                                $ae_loc.app_cfg.show_element__access_type = true;
                                $ae_loc.app_cfg.show_element__passcode_input = true;

                                // await tick();
                                // console.log('Layout button click: Focus on passcode input!');
                                // /** @type {HTMLElement | null} */
                                // const to_focus = document.getElementById('access_passcode_input');
                                // to_focus?.focus();
                            } else {
                                $ae_loc.app_cfg.show_element__menu = false;
                                $ae_loc.app_cfg.show_element__menu_btn = true;
                            }
                        }}
                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
                        title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
                        >
                        <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
                        <ShieldMinus class="inline-block" />
                        Clear?
                    </button>
                {/if}
            {:else}
                <button
                        type="button"
                        onclick={async () => {
                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
                                $ae_loc.app_cfg.show_element__menu = true;
                                $ae_loc.app_cfg.show_element__menu_btn = false;
                                $ae_loc.app_cfg.show_element__access_type = true;
                                $ae_loc.app_cfg.show_element__passcode_input = true;
                                await tick();
                                console.log('Layout button click: Focus on passcode input!');
                                /** @type {HTMLElement | null} */
                                const to_focus = document.getElementById('access_passcode_input');
                                to_focus?.focus();
                            } else {
                                $ae_loc.app_cfg.show_element__menu = false;
                                $ae_loc.app_cfg.show_element__menu_btn = true;
                            }
                            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
                        }}
                        class="
                            btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
                            *:hover:inline
                            "
                        title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
                        >
                    <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
                    <!-- <span class="">Unlock?</span> -->
                    <ShieldUser class="inline-block" />
                    <span class="hidden">Auth?</span>
                </button>
            {/if}
        </div>
    </span>

    <!-- <div> -->
    <!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
    <!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
    <!-- class:hover:visible={true} -->
    <!-- invisible -->
    <button
        type="button"
        class:w-48={$ae_loc?.app_cfg?.show_element__menu}

        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1  *:hover:inline"
        title="Show or hide the menu"
        onclick={async () => {
            if (!$ae_loc?.app_cfg?.show_element__menu) {
                $ae_loc.app_cfg.show_element__menu = true;
                // $ae_loc.app_cfg.show_element__menu_btn = false;
                $ae_loc.app_cfg.show_element__access_type = true;

                if ($ae_loc?.access_type == 'anonymous') {
                    $ae_loc.app_cfg.show_element__passcode_input = true;
                } else {
                    $ae_loc.app_cfg.show_element__passcode_input = false;
                }
                // $ae_loc.app_cfg.show_element__passcode_input = true;
                await tick();
                console.log('Layout button click: Focus on passcode input!');
                /** @type {HTMLElement | null} */
                const to_focus = document.getElementById('access_passcode_input');
                to_focus?.focus();
            } else {
                $ae_loc.app_cfg.show_element__menu = false;
                // $ae_loc.app_cfg.show_element__menu_btn = true;
                $ae_loc.app_cfg.show_element__passcode_input = false;
            }
            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
        }}
        >
        <span class=" *:hover:inline-block">
        {#if $ae_loc?.app_cfg?.show_element__menu}
            <CircleX class="inline-block" />
            <span class="inline-block">
                Hide Menu
            </span>
        {:else}
            <Menu class="inline-block" />
            <span class="hidden">
                Menu
            </span>
        {/if}
        </span>
    </button>
    <!-- </div> -->

</div>



<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<!-- absolute right-0 bottom-10 -->
 <!-- opacity-50 -->
        <!-- hover:opacity-100 -->
         <!-- bg-white dark:bg-gray-800 -->
<div
    class="
        ae_app__menu
        hidden-print
        flex flex-col
        items-end
        justify-end
        gap-4

        min-w-48

        border border-gray-200 dark:border-gray-700
        rounded-lg
        px-1 py-2

        transition-all
        delay-1000 hover:delay-100
        duration-100 hover:duration-200
        ease-in-out

        z-20 hover:z-30
    "
    class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
    >

    <button
        type="button"
        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
        title="Sign In"
        onclick={() => {
            if (!$ae_loc?.app_cfg?.show_element__menu) {
                    $ae_loc.app_cfg.show_element__menu = true;
                    // $ae_loc.app_cfg.show_element__menu_btn = false;
                } else {
                    $ae_loc.app_cfg.show_element__menu = false;
                    // $ae_loc.app_cfg.show_element__menu_btn = true;
                }
            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
        }}
        >
        {#if $ae_loc?.app_cfg?.show_element__menu}
            <CircleX class="mx-1 inline-block" />
            <!-- <span class="hidden"> -->
                Hide Menu
            <!-- </span> -->
        {:else}
            <Menu class="mx-1 inline-block" />
            <!-- <span class="hidden"> -->
                Menu
            <!-- </span> -->
        {/if}
    </button>

    <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
    <span
        class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
        >
    <Element_app_cfg
        set_theme_mode={true}
        set_theme_name={true}
        />
    </span>
    <!-- {/if} -->

    {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
    <Element_sign_in_out
        data={data}
        hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
        />
    {/if}

    {#if $ae_loc?.app_cfg?.show_element__access_type}
    <Element_access_type
        show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
        trigger_clear_access={trigger_clear_access}
        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
        />
    {/if}



</div>

</section>
