<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';
import Element_theme from '$lib/e_app_theme.svelte';

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

let {
    log_lvl = $bindable(0),
    data = null,
    hide = $bindable(false),
    expand = $bindable(false),
}: 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={!expand_btn}
    > -->
<!-- && !expand -->
    <!-- !$ae_loc
    ?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!expand} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
    class="
        ae_app__sys_menu

        hidden-print
        z-50
        absolute bottom-0 right-0

        opacity-90
        hover:opacity-100

        w-min
        max-w-md

        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:blue-100/20 dark:bg-blue-800/30
        dark:text-slate-400 dark:hover:text-slate-200
        hover:bg-blue-200/90 hover:dark:bg-blue-900/90
        active:bg-blue-200 active:dark:bg-blue-900

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

        transition-all
        delay-500 hover:delay-200
        duration-500 hover:duration-200
        ease-in-out
    "
    class:top-0={expand && 1 == 3}
    class:opacity-100={expand}
    class:w-full={expand}
    class:hidden={false}
    class:border-transparent={!expand}
    class:hover:bg-transparent={!expand}
    >

<!-- class:hidden={!expand} -->
<!-- class:preset-filled-warning-100-900={expand} -->
<div
    class:opacity-100={expand}
    class="
        hidden-print
        flex flex-col items-end justify-end
        gap-1

        overflow-y-auto
        p-1

        w-full

        bg-gray-500/75
        hover:bg-blue-100/90 active:bg-blue-200 focus:bg-blue-300
        dark:dark-gray-800/80 dark:hover:bg-gray-800/90

        relative

        opacity-80
        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}
    <!-- class:hidden={!expand}
    class:hover:visible={expand}
    class:invisible={!expand} -->
    <div
        class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
        title="
        ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
        Username: {$ae_loc?.user?.username ?? '-- not set --'}
        Email: {$ae_loc?.user?.email ?? '-- not set --'}
        "
        >
        <span class="flex flex-row gap-1 w-16">
            <User class="mx-1 inline-block text-gray-500" />
            <span
                class:hidden={!expand}
                class="group-hover:inline-block"
                >
                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
            </span>
        </span>

        <span class:hidden={!expand} class="">
            <!-- <ShieldUser /> -->
            <ShieldUser class="mx-1 inline-block text-gray-500" />
            <span>
                {$ae_loc?.user?.username ?? '-- not set --'}
            </span>
        </span>
    </div>
    {/if}


    <div class="flex flex-row gap-1 items-center justify-end transition-all w-full">
        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
            <span
                class="flex flex-row-reverse gap-1 group"
                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={!expand}
                        class="hidden group-hover:inline-block"
                        >Super</span>
                {:else if $ae_loc.access_type == 'manager'}
                    <span class="fas fa-user-shield m-1"></span>
                    <span
                        class:hidden={!expand}
                        class="hidden group-hover:inline-block"
                        >Manager</span>
                {:else if $ae_loc.access_type == 'administrator'}
                    <span class="fas fa-user-ninja m-1"></span>
                    <span
                        class:hidden={!expand}
                        class="hidden group-hover:inline-block"
                        >Administrator</span>
                {:else if $ae_loc.access_type == 'trusted'}
                    <span class="fas fa-user-check m-1"></span>
                    <span
                        class:hidden={!expand}
                        class="hidden group-hover:inline-block"
                        >Trusted Access</span>
                {:else if $ae_loc.access_type == 'public'}
                    Public
                    <span
                        class:hidden={!expand}
                        class="hidden group-hover:inline-block"
                        >Access</span>
                {:else if $ae_loc.access_type == 'authenticated'}
                    Authenticated
                    <span
                        class:hidden={!expand}
                        class="hidden group-hover:inline-block"
                        >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 (!expand) {
                            expand = true;
                            $ae_loc.sys_menu.expand = true;
                            $ae_loc.sys_menu.hide_access_type = false;
                            $ae_loc.sys_menu.expand_access_type = true;
                            // $ae_loc.sys_menu.expand_btn = false;
                            // $ae_loc.app_cfg.show_element__access_type = true;
                            // $ae_loc.app_cfg.show_element__passcode_input = true;
                        } else {
                            // expand = true;
                            // $ae_loc.sys_menu.expand = false;
                            $ae_loc.sys_menu.hide_access_type = false;
                            $ae_loc.sys_menu.expand_access_type = true;

                            // $ae_loc.sys_menu.expand_btn = true;
                        }
                    }}
                    class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
                    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 group-hover:inline-block">Passcode?</span>

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

                        if (expand) {
                            $ae_loc.sys_menu.hide_access_type = false;
                            $ae_loc.sys_menu.expand_access_type = false;
                            expand = false;

                            // $ae_loc.sys_menu.expand = true;
                            // $ae_loc.sys_menu.expand_btn = false;
                            $ae_loc.app_cfg.show_element__access_type = true;
                            $ae_sess.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.sys_menu.hide_access_type = false;
                            $ae_loc.sys_menu.expand_access_type = true;
                            // $ae_loc.sys_menu.expand = false;
                            // $ae_loc.sys_menu.expand_btn = true;
                        }
                    }}
                    class="
                        btn btn-sm text-xs
                        flex-row-reverse
                        variant-outline-surface hover:variant-ghost-warning
                        transition-all group
                        "
                    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" />
                    <span class="hidden group-hover:inline-block">
                        Clear?
                    </span>
                </button>
            {/if}
        {:else}
            <button
                    type="button"
                    onclick={async () => {

                        expand = true;
                        $ae_loc.sys_menu.hide_access_type = false;
                        $ae_loc.sys_menu.expand_access_type = true;

                        // $ae_loc.sys_menu.expand = true;
                        // $ae_loc.sys_menu.expand_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();

                    }}
                    class="
                        btn btn-sm text-xs
                        flex-row-reverse
                        variant-outline-surface hover:variant-ghost-success
                        transition-all group
                        "
                    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 group-hover:inline-block">Auth?</span>
            </button>
        {/if}
    </div>



    {#if $ae_loc.edit_mode}
        <button
            type="button"
            onclick={() => {
                $ae_loc.edit_mode = false;
                // dispatch_edit_mode_changed();
            }}
            class="
                btn btn-base text-sm
                preset-tonal-warning
                preset-outlined-warning-800-200
                hover:preset-tonal-success
                transition-all group
                gap-1
                "
            title="Edit mode is currently enabled. Click to disable."
            >
            <span class="fas fa-toggle-on m-1 inline-block"></span>
            <span class="">Edit</span>
            <span class="hidden group-hover:inline-block">
                Mode
            </span>
        </button>
    {:else if $ae_loc.authenticated_access}
        <button
            type="button"
            onclick={() => {
                $ae_loc.edit_mode = true;
                // dispatch_edit_mode_changed();
            }}
            class="
                btn btn-base text-sm
                preset-tonal-surface
                preset-outlined-warning-400-600
                hover:preset-tonal-warning
                transition-all group
                gap-1
                min-w-24
                "
            title="Edit mode is currently disabled. Click to enable."
            >
            <span class="fas fa-toggle-off m-1 inline"></span>
            <span class="inline">Edit</span>
            <span class="hidden group-hover:inline">
                Mode?
            </span>
        </button>
    {/if}


    <!-- <div> -->
    <!-- class:visible={expand} -->
    <!-- class:invisible={!expand} -->
    <!-- class:hover:visible={true} -->
    <!-- invisible -->
    <button
        type="button"
        class:w-full={expand}
        class="
            btn btn-base text-sm
            preset-filled-tertiary-400-600
            preset-outlined-tertiary-400-600
            hover:preset-filled-success active:preset-filled-success
            px-6 py-1
            min-w-24
            transition-all group
            "
        title="Show/Hide the system menu"
        onclick={async () => {
            if (!expand) {
                expand = true;
                // $ae_loc.sys_menu.expand = true;
                // $ae_loc.sys_menu.expand_btn = false;
                $ae_loc.app_cfg.show_element__access_type = true;

                if ($ae_loc?.access_type == 'anonymous') {
                    $ae_sess.app_cfg.show_element__passcode_input = true;
                } else {
                    $ae_sess.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 {
                expand = false;
                // $ae_loc.sys_menu.expand = false;
                // $ae_loc.sys_menu.expand_btn = true;
                // $ae_loc.app_cfg.show_element__passcode_input = false;
            }
            // $ae_loc.sys_menu.expand_btn = !expand_btn;
        }}
        >
        <!-- <span class=""> -->
        {#if expand}
            <CircleX class="m-1 inline-block" />
            <span class="hidden group-hover:inline-block">
                Hide Menu
            </span>
        {:else}
            <Menu class="m-1 inline-block" />
            <span class="hidden group-hover:inline-block">
                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:preset-filled-warning-200-800={expand}
    class:hidden={!expand}
    class="
        ae_app__sys_menu

        hidden-print
        flex flex-col
        items-end
        justify-end
        gap-2

        min-w-48

        bg-white dark:bg-gray-800

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

    <button
        type="button"
        class:w-full={expand}
        class="
            btn btn-sm
            preset-filled-tertiary-400-600
            preset-outlined-tertiary-400-600
            hover:preset-filled-success active:preset-filled-success
            px-6 py-1
            transition-all group
            "
        title="Show/Hide the system menu"
        onclick={() => {
            if (!expand) {
                    expand = true;
                    $ae_loc.sys_menu.expand = true;
                    // $ae_loc.sys_menu.expand_btn = false;
                } else {
                    $ae_loc.sys_menu.expand = false;
                    // $ae_loc.sys_menu.expand_btn = true;
                }
            // $ae_loc.sys_menu.expand_btn = !expand_btn;
            // $ae_loc.sys_menu.expand = !expand;
        }}
        >
        {#if expand}
            <CircleX class="m-1 inline-block" />
            <span class="hidden group-hover:inline-block">
                Hide Menu
            </span>
        {:else}
            <Menu class="m-1 inline-block" />
            <span class="hidden group-hover:inline-block">
                Menu
            </span>
        {/if}
    </button>

    <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
    <span
        class:hidden={!$ae_loc.edit_mode}
        >
    <Element_app_cfg
        hide={$ae_loc.sys_menu.hide_app_cfg}
        expand={$ae_loc.sys_menu.expand_app_cfg}
        />
    </span>
    <span
        class:hidden={!$ae_loc.edit_mode}
        >
    <Element_theme
        hide={$ae_loc.sys_menu.hide_app_cfg}
        expand={$ae_loc.sys_menu.expand_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
        hide={$ae_loc.sys_menu.hide_user}
        expand={$ae_loc.sys_menu.expand_user}
        data={data}
        hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
        />
    {/if}

    {#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
    <!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
    <Element_access_type
        bind:hide={$ae_loc.sys_menu.hide_access_type}
        bind:expand={$ae_loc.sys_menu.expand_access_type}
        bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
        bind:trigger_clear_access={trigger_clear_access}
        />
    {/if}



</div>

</section>
