<script lang="ts">
    import { Settings } 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 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

        bg-blue-100 text-gray-900
        dark:bg-blue-800 dark:text-gray-200

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

        w-72 max-w-72
        p-1
        border-2 border-gray-200

        duration-300 delay-150 hover:delay-1000 hover:ease-out
        transition-all
        "
    class:hidden={hide}
>
    <header class:hidden={!expand} class="ae_header w-full">
        <h2 class="text-sm text-center font-semibold">Config</h2>
    </header>

    <div
        class="ae_cfg_content text-xs space-y-4 my-4"
        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'}
                    <span class="fas fa-secret mx-1"></span> Super Access
                {:else if $ae_loc.access_type == 'manager'}
                    <span class="fas fa-user-shield mx-1"></span> Manager Access
                {:else if $ae_loc.access_type == 'administrator'}
                    <span class="fas fa-user-ninja mx-1"></span> Administrator Access
                {:else if $ae_loc.access_type == 'trusted'}
                    <span class="fas fa-user-nurse mx-1"></span> Trusted Access
                {:else if $ae_loc.access_type == 'authenticated'}
                    <span class="fas fa-user-friends mx-1"></span> Authenticated Access
                {:else if $ae_loc.access_type == 'anonymous'}
                    <span class="fas fa-users mx-1"></span> Anonymous Access
                {:else}
                    <span class="fas fa-unlock mx-1"></span> Unknown Access
                {/if}

                <!-- <button
        class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
        on:click={() => {
            handle_clear_access();
        }}
        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">
                <span class="fas fa-code mx-1"></span>
                Util: Convert Videos
            </a>

            {#if $ae_loc.iframe}
                <a class="btn btn-sm preset-tonal-secondary" href="/?iframe=false">
                    <span class="fas fa-code mx-1"></span>
                    Exit iframe Mode
                </a>
            {:else}
                <a class="btn btn-sm preset-tonal-secondary" href="/?iframe=true">
                    <span class="fas fa-code mx-1"></span>
                    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();
                    }}
                >
                    <span class="fas fa-sync mx-1"></span>
                    Reload &
                    <span class="fas fa-trash mx-1"></span>
                    Clear Cache
                </button>
                <button
                    class="btn btn-sm preset-tonal-warning"
                    title="Clear the browser storage for this page"
                    onclick={() => {
                        if (
                            !confirm(
                                'Are you sure you want to clear the local and session storage?'
                            )
                        ) {
                            return false;
                        }

                        // Clear the local and session storage
                        localStorage.clear();
                        sessionStorage.clear();

                        // Clear Indexed DB as well
                        indexedDB.deleteDatabase('ae_core_db');
                        indexedDB.deleteDatabase('ae_events_db');

                        window.location.reload();
                        // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
                    }}
                >
                    <span class="fas fa-eraser mx-1"></span>
                    Clear Storage & DB
                </button>
            </div>
        </section>
        <!-- END: Utilities -->
    </div>

    <!-- class:justify-between={expand}
class:justify-end={!expand} -->
    <div class="flex flex-row gap-2 items-center justify-between w-full">
        <!-- {#if !expand} -->
        <span>
            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
                {#if $ae_loc.access_type == 'super'}
                    <span class="fas fa-secret mx-1"></span> Super Access
                {:else if $ae_loc.access_type == 'manager'}
                    <span class="fas fa-user-shield mx-1"></span> Manager Access
                {:else if $ae_loc.access_type == 'administrator'}
                    <span class="fas fa-user-ninja mx-1"></span> Administrator Access
                {:else if $ae_loc.access_type == 'trusted'}
                    <span class="fas fa-user-nurse mx-1"></span> Trusted Access
                {:else if $ae_loc.access_type == 'authenticated'}
                    <span class="fas fa-user-friends mx-1"></span> Authenticated Access
                {:else if $ae_loc.access_type == 'anonymous'}
                    <span class="fas fa-users mx-1"></span> Anonymous Access
                {:else}
                    <span class="fas fa-unlock mx-1"></span> Unknown Access
                {/if}

                <!-- <button
                class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
                on:click={() => {
                    handle_clear_access();
                }}
                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 text-sm
            preset-tonal-warning
            group 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>
