<script lang="ts">
import { createEventDispatcher, onMount, tick } from 'svelte';
import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';

import { ae_util } from '$lib/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';

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

export let theme_mode: null|string = null;
export let set_theme_mode: null|boolean = null;
export let theme_name: null|string = null;
export let set_theme_name: null|boolean = null;

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.hub.theme_mode) {
    console.log(`$ae_loc.hub.theme_mode=${$ae_loc.hub.theme_mode}`);
    $slct_trigger = null;
    if ($ae_loc.hub.theme_mode == 'light') {
        document.documentElement.classList.remove('dark');
        document.documentElement.classList.add('light');
    } else if ($ae_loc.hub.theme_mode == 'dark') {
        document.documentElement.classList.remove('light');
        document.documentElement.classList.add('dark');
    }
}

$: if ($slct_trigger == 'set_theme_name' && $ae_loc.hub.theme_name) {
    console.log(`$ae_loc.hub.theme_name=${$ae_loc.hub.theme_name}`);
    $slct_trigger = null;
    // Update the body attribute named "data-theme" to the current theme name.
    document.body.setAttribute('data-theme', $ae_loc.hub.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 bg-surface-100 text-surface-800 transition hover:transition-all hidden-print">

<div
    class="ae_cfg_content text-xs space-y-4 my-4"
    class:hidden={!$ae_loc.hub.show_element__cfg_detail}
    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"></span> Super Access
    {:else if $ae_loc.access_type == 'manager'}
        <span class="fas fa-user-shield"></span> Manager Access
    {:else if $ae_loc.access_type == 'administrator'}
        <span class="fas fa-user-ninja"></span> Administrator Access
    {:else if $ae_loc.access_type == 'trusted'}
        <span class="fas fa-user-nurse"></span> Trusted Access
    {:else if $ae_loc.access_type == 'authenticated'}
        <span class="fas fa-user-friends"></span> Authenticated Access
    {:else if $ae_loc.access_type == 'anonymous'}
        <span class="fas fa-users"></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">Theme:</h2>
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
    active="variant-glass-success"
    hover="hover:variant-ringed-surface"
    >
    <RadioItem
        on:change={() => {
            $slct_trigger = 'set_theme_mode';
        }}
        bind:group={$ae_loc.hub.theme_mode}
        name="theme_light"
        value={'light'}
        >
        Light
    </RadioItem>
    <RadioItem
        on:change={() => {
            $slct_trigger = 'set_theme_mode';
        }}
        bind:group={$ae_loc.hub.theme_mode}
        name="theme_dark"
        value={'dark'}
        >
        Dark
    </RadioItem>
</RadioGroup>
</div>

<div>
<!-- Theme Name: -->
<select
    on:change={() => {
        $slct_trigger = 'set_theme_name';
    }}
    bind:value={$ae_loc.hub.theme_name}
    class="select"
    title="Theme name"
    >
    <option value="">-- None --</option>
    <option value="gold-nouveau">Gold Nouveau</option>
    <option value="hamlindigo">Hamlindigo</option>
    <option value="modern">Modern</option>
    <option value="rocket">Rocket</option>
    <option value="wintry">Wintry</option>
</select>
</div>
</section>
<!-- END: Theme -->


<section class="space-y-2">

<h2 class="strong">Utilities:</h2>
<a
    class="btn btn-sm variant-glass-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 variant-glass-secondary"
    href="/?iframe=false"
    >
    <span class="fas fa-code mx-1"></span>
    Exit iframe Mode
</a>
{:else}
<a
    class="btn btn-sm variant-glass-secondary"
    href="/?iframe=true"
    >
    <span class="fas fa-code mx-1"></span>
    Use iframe Mode
</a>
{/if}

<div>
<button
	class="btn btn-sm variant-glass-warning"
	title="Reload and clear the page cache"
	on:click={() => {
		// $ae_loc.
		window.location.reload(true);
	}}
	>
	<span class="fas fa-sync mx-1"></span>
	Reload and
    <span class="fas fa-trash mx-1"></span>
    Clear Cache
</button>
<button
	class="btn btn-sm variant-glass-warning"
	title="Clear the browser storage for this page"
	on:click={() => {
		// $ae_loc.
		localStorage.clear();
		sessionStorage.clear();
		alert('Local and Session Storage cleared. You will probably want to refresh the page.');
	}}
	>
	<span class="fas fa-eraser mx-1"></span>
	Clear Storage
</button>
</div>

</section>
<!-- END: Utilities -->


</div>


<button
    class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
    on:click={() => {
        $ae_loc.hub.show_element__cfg_detail = !$ae_loc.hub.show_element__cfg_detail;
    }}
    >
    <span class="fas fa-cog mx-1"></span>
    <span class="cfg_text">Config</span>
</button>


</section>


<style lang="postcss">
/* BEGIN: AE's Svelte App Config component  */
#AE-App-Cfg {
    /* position: absolute; */
    position: fixed;
    /* position: relative; */
    /* position: static; */
    /* position: sticky; */
    /* top: 1em; */
    bottom: 1.5rem;
    left: 0rem;

    padding: .5rem;

    /* lightyellow */
    /* background-color: hsla(60,100%,90%,.30);  */
    /* background-color: rgba(var(--color-surface-500) / .95); */

    border-top: solid thin hsla(0,0%,0%,.5);
    border-right: solid thin hsla(0,0%,0%,.5);
    border-bottom: solid thin hsla(0,0%,0%,.5);
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;

    opacity: .15;
    /* opacity: 1; */

    font-size: .75rem;

    z-index: 5;

    /* NOTE: transition when no longer hovering */
    transition-property: opacity, background-color;
    transition-delay: 1.25s;
    transition-duration: .5s;
    transition-timing-function: ease-out;
}

#AE-App-Cfg:hover {
    /* lightyellow */
    /* background-color: hsla(60,100%,90%,.95); */
    /* background-color: rgba(var(--color-surface-100) / 1); */
    /* color: black; */

    border-top: solid thin hsla(0,0%,0%,.95);
    border-right: solid thin hsla(0,0%,0%,.95);
    border-bottom: solid thin hsla(0,0%,0%,.95);

    opacity: 1;

    /* NOTE: transition when hover starts */
    transition-property: opacity, background-color;
    transition-delay: .5s;
    transition-duration: .10s;
    transition-timing-function: ease-in;
}

.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;
    /* outline: solid thin red; */
}
/* END: AE's Svelte App Config component */
</style>
