<script lang="ts">
import {
    Code,
    Eraser,
    LockOpen,
    RefreshCw,
    Settings,
    ShieldCheck,
    ShieldUser,
    Trash2,
    UserRound,
    Users
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import E_app_url_builder from '$lib/app_components/e_app_url_builder.svelte';

// import Element_theme from '$lib/e_app_theme.svelte';

let notes: null | string = null;
let all: boolean = false;

interface Props {
    log_lvl?: number;
    hide?: null | boolean;
    expand?: boolean;
    // export let theme_mode: null|string = null;
    // set_theme_mode?: null|boolean;
    // export let theme_name: null|string = null;
    // set_theme_name?: null|boolean;
}

let {
    log_lvl = $bindable(0),
    hide = $bindable(false),
    expand = $bindable(false)
    // set_theme_mode = null,
    // set_theme_name = null
}: Props = $props();

// const dispatch = createEventDispatcher();

// onMount(() => {
//     // console.log('** Element Mounted: ** Element App Config');
//     if (set_theme_mode) {
//         $slct_trigger = 'set_theme_mode';
//     }
//     if (set_theme_name) {
//         $slct_trigger = 'set_theme_name';
//     }
// });

// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
//     console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
//     $slct_trigger = null;
//     if ($ae_loc.app_cfg.theme_mode == 'light') {
//         document.documentElement.classList.remove('dark');
//         document.documentElement.classList.add('light');
//     } else if ($ae_loc.app_cfg.theme_mode == 'dark') {
//         document.documentElement.classList.remove('light');
//         document.documentElement.classList.add('dark');
//     }
// }

// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.app_cfg?.theme_name) {
//     console.log(`$ae_loc?.app_cfg?.theme_name=${$ae_loc?.app_cfg?.theme_name}`);
//     $slct_trigger = null;
//     // Update the body attribute named "data-theme" to the current theme name.
//     document.body.setAttribute('data-theme', $ae_loc?.app_cfg?.theme_name);
// }

// $: if (entered_passcode && entered_passcode.length >= 5) {
//     console.log(`entered_passcode=${entered_passcode}`);
//     handle_check_access_type_passcode();
// }

// $: if (trigger && $ae_loc.access_type) {
//     console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);

//     let access_checks_results =  ae_util.process_permission_checks($ae_loc.access_type);

//     $ae_loc = {...$ae_loc, ...access_checks_results};
// } else if (trigger) {
//     console.log(`$ae_loc.access_type=not set`);

//     // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
//     let access_checks_results =  ae_util.process_permission_checks('');

//     $ae_loc = {...$ae_loc, ...access_checks_results};
// }

function handle_something() {
    // console.log('*** handle_something() ***');
}

function handle_clear_storage(item: null | string) {
    // console.log('*** handle_clear_storage() ***');
    // window.localStorage.setItem('access_type', 'anonymous');
    // return true;
}

// function dispatch_something_changed() {
//     console.log('*** dispatch_something_changed() ***');

//     console.log(ae_util);
//     console.log($ae_loc);

//     dispatch('access_type_changed', {
//         access_type: $ae_loc.access_type
//     });
// }
</script>

<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section
    id="AE-App-Cfg"
    class="
        ae_app_cfg
        hidden-print

        flex w-72
        max-w-72 flex-col

        flex-wrap items-end justify-center gap-1
        border-2 border-gray-200

        bg-blue-100 p-1
        text-gray-900
        transition-all delay-150

        duration-300 hover:delay-1000 hover:ease-out dark:bg-blue-800
        dark:text-gray-200
        "
    class:hidden={hide}>
    <header class:hidden={!expand} class="ae_header w-full">
        <h2 class="text-center text-sm font-semibold">Config</h2>
    </header>

    <div
        class="ae_cfg_content my-4 space-y-4 text-xs"
        class:hidden={!expand}
        data-sveltekit-preload-data="false">
        <section class="space-y-2">
            <div>
                <h2 class="strong">Access Type:</h2>
            </div>
            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
                {#if $ae_loc.access_type == 'super'}
                    <ShieldCheck size="1em" class="mx-1" /> Super Access
                {:else if $ae_loc.access_type == 'manager'}
                    <ShieldUser size="1em" class="mx-1" /> Manager Access
                {:else if $ae_loc.access_type == 'administrator'}
                    <UserRound size="1em" class="mx-1" /> Administrator Access
                {:else if $ae_loc.access_type == 'trusted'}
                    <UserRound size="1em" class="mx-1" /> Trusted Access
                {:else if $ae_loc.access_type == 'authenticated'}
                    <Users size="1em" class="mx-1" /> Authenticated Access
                {:else if $ae_loc.access_type == 'anonymous'}
                    <Users size="1em" class="mx-1" /> Anonymous Access
                {:else}
                    <LockOpen size="1em" class="mx-1" /> Unknown Access
                {/if}

                <!-- <button
        class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
        title="Access mode is currently enabled/unlocked. Click to exit and lock."
        >
        <span class="fas fa-lock mx-1"></span> Lock
    </button> -->
            {:else}
                Not logged in
            {/if}
        </section>
        <!-- END: Access Type -->

        <section class="space-y-2">
            <h2 class="strong">Utilities:</h2>
            <a class="btn btn-sm preset-tonal-secondary" href="/hosted_files">
                <Code size="1em" class="mx-1" />
                Util: Convert Videos
            </a>

            {#if $ae_loc.iframe}
                <a
                    class="btn btn-sm preset-tonal-secondary"
                    href="/?iframe=false">
                    <Code size="1em" class="mx-1" />
                    Exit iframe Mode
                </a>
            {:else}
                <a
                    class="btn btn-sm preset-tonal-secondary"
                    href="/?iframe=true">
                    <Code size="1em" class="mx-1" />
                    Use iframe Mode
                </a>
            {/if}

            <div>
                <button
                    class="btn btn-sm preset-tonal-warning"
                    title="Reload and clear the page cache"
                    onclick={() => {
                        // $ae_loc.
                        window.location.reload();
                    }}>
                    <RefreshCw size="1em" class="mx-1" />
                    Reload &
                    <Trash2 size="1em" class="mx-1" />
                    Clear Cache
                </button>
                <button
                    class="btn btn-sm preset-tonal-warning"
                    title="Full Reset: Delete ALL IndexedDB databases, clear localStorage and sessionStorage for this origin, then reload."
                    onclick={async () => {
                        if (
                            !confirm(
                                'FULL RESET: Delete ALL IndexedDB databases, clear localStorage and sessionStorage, then reload? This cannot be undone.'
                            )
                        ) {
                            return;
                        }

                        const db_list = await indexedDB.databases();
                        console.log('[clear_all] IDB databases found:', db_list.map((d) => d.name));
                        for (const db of db_list) {
                            if (db.name) indexedDB.deleteDatabase(db.name);
                        }

                        localStorage.clear();
                        sessionStorage.clear();

                        window.location.reload();
                    }}>
                    <Eraser size="1em" class="mx-1" />
                    Clear Storage & DB
                </button>
            </div>
        </section>
        <!-- END: Utilities -->

        <section class="space-y-2">
            <E_app_url_builder />
        </section>
    </div>

    <!-- class:justify-between={expand}
class:justify-end={!expand} -->
    <div class="flex w-full flex-row items-center justify-between gap-2">
        <!-- {#if !expand} -->
        <span>
            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
                {#if $ae_loc.access_type == 'super'}
                    <ShieldCheck size="1em" class="mx-1" /> Super Access
                {:else if $ae_loc.access_type == 'manager'}
                    <ShieldUser size="1em" class="mx-1" /> Manager Access
                {:else if $ae_loc.access_type == 'administrator'}
                    <UserRound size="1em" class="mx-1" /> Administrator Access
                {:else if $ae_loc.access_type == 'trusted'}
                    <UserRound size="1em" class="mx-1" /> Trusted Access
                {:else if $ae_loc.access_type == 'authenticated'}
                    <Users size="1em" class="mx-1" /> Authenticated Access
                {:else if $ae_loc.access_type == 'anonymous'}
                    <Users size="1em" class="mx-1" /> Anonymous Access
                {:else}
                    <LockOpen size="1em" class="mx-1" /> Unknown Access
                {/if}

                <!-- <button
                class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
                title="Access mode is currently enabled/unlocked. Click to exit and lock."
                >
                <span class="fas fa-lock mx-1"></span> Lock
            </button> -->
            {:else}
                Not logged in
            {/if}
        </span>
        <!-- {/if} -->

        <button
            class="
            ae_cfg_btn
            btn btn-sm preset-tonal-warning
            group
            text-sm transition-all
            "
            onclick={() => {
                expand = !expand;
            }}>
            <!-- <span class="fas fa-cog m-1"></span> -->
            <span class="inline-block" title="Settings">
                <Settings class="m-1" />
            </span>
            <span
                class="
                cfg_text
                hidden
                group-hover:inline
                ">
                Settings
            </span>
        </button>
    </div>
</section>

<style lang="postcss">
.ae_cfg_btn .cfg_text {
    /* display: none; */
}

.ae_cfg_btn:hover .cfg_text {
    /* display: initial; */
    /* outline: solid thin red; */
}

/* .access_type .current_text {
    display: none;
} */

/* .access_type:hover .current_text {
    display: initial;
} */
/* END: AE's Svelte App Config component */
</style>
