<script lang="ts">
import { createEventDispatcher, onMount, tick } from 'svelte';

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

let entered_passcode: null|string = null;
let show_passcode_input: boolean = false;

let trigger: null|string = null;

const dispatch = createEventDispatcher();


onMount(() => {
    console.log('** Element Mounted: ** Element Access Type');
});


$: 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_check_access_type_passcode() {
    // console.log('*** handle_check_access_type_passcode() ***');

    if (entered_passcode && entered_passcode.length >= 5) {
        if ($ae_loc.page_access_code_li.administrator == entered_passcode) {
            console.log('Administrator passcode matched');

            window.localStorage.setItem('access_type', 'administrator');

            entered_passcode = null;

            $ae_loc.access_type = 'administrator';
            trigger = 'process_permission_check';

            // $ae_loc = $ae_loc; // Trigger Svelte just in case
            // ae_loc.set($ae_loc);
            // console.log($ae_loc);

            dispatch_access_type_changed();

            return true;
        } else if ($ae_loc.page_access_code_li.trusted == entered_passcode) {
            console.log('Trusted passcode matched');

            window.localStorage.setItem('access_type', 'trusted');

            entered_passcode = null;

            $ae_loc.access_type = 'trusted';
            trigger = 'process_permission_check';

            // $ae_loc = $ae_loc; // Trigger Svelte just in case
            // ae_loc.set($ae_loc);
            // console.log($ae_loc);

            dispatch_access_type_changed();

            return true;
        } else if ($ae_loc.page_access_code_li.public == entered_passcode) {
            console.log('Authenticated passcode matched');

            window.localStorage.setItem('access_type', 'public');

            entered_passcode = null;

            $ae_loc.access_type = 'public';
            trigger = 'process_permission_check';

            dispatch_access_type_changed();

            return true;
        } else if ($ae_loc.page_access_code_li.authenticated == entered_passcode) {
            console.log('Authenticated passcode matched');

            window.localStorage.setItem('access_type', 'authenticated');

            entered_passcode = null;

            $ae_loc.access_type = 'authenticated';
            trigger = 'process_permission_check';

            dispatch_access_type_changed();

            return true;
        } else {
            console.log('Passcode does not match');

            window.localStorage.setItem('access_type', 'anonymous');

            $ae_loc.access_type = 'anonymous';
            trigger = 'process_permission_check';

            // $ae_loc = $ae_loc; // Trigger Svelte just in case
            // ae_loc.set($ae_loc);
            // console.log($ae_loc);

            dispatch_access_type_changed();

            return false;
        }
    } else {
        console.log('Entered passcode too short.');

        // $ae_loc.access_type = null; // 'anonymous';

        // dispatch_access_type_changed()

        return null;
    }
}

function handle_clear_access() {
    // NOTE: I think it makes since to reset this to anonymous even if logged in as an admin or similar.
    window.localStorage.setItem('access_type', 'anonymous');

    // $ae_loc.access_type = null; // 'anonymous';
    $ae_loc.access_type = 'anonymous';
    trigger = 'process_permission_check';

    show_passcode_input = false;

    // $ae_loc = $ae_loc; // Trigger Svelte just in case
    // ae_loc.set($ae_loc);
    // console.log($ae_loc);

    dispatch_access_type_changed();

    return true;
}

function dispatch_access_type_changed() {
    console.log('*** dispatch_access_type_changed() ***');

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

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


<section id="AE-Quick-Access-Type" class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all hidden-print">
    {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
        {#if $ae_loc.access_type == 'super'}
            <span class="fas fa-unlock"></span> Super Access
        {:else if $ae_loc.access_type == 'manager'}
            <span class="fas fa-unlock"></span> Manager Access
        {:else if $ae_loc.access_type == 'administrator'}
            <span class="fas fa-unlock"></span> Administrator Access
        {:else if $ae_loc.access_type == 'trusted'}
            <span class="fas fa-unlock"></span> Trusted Access
        {:else if $ae_loc.access_type == 'authenticated'}
            <span class="fas fa-unlock"></span> Authenticated Access
        {:else if $ae_loc.access_type == 'anonymous'}
            <span class="fas fa-unlock"></span> Anonymous Access
        {:else}
            <span class="fas fa-unlock mx-1"></span> Unknown Access
        {/if}

        <button
            class="btn btn-sm 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}
        <button
            class="btn btn-sm access_type_unlock_btn hover:transition-all"
            on:click={async () => {
                show_passcode_input = !show_passcode_input;
                await tick();
                document.getElementById('access_passcode_input').focus();
                // element.focus({preventScroll:false});
            }}
            title="Anonymous public access is currently set. Access mode is disabled/locked."
            >
            <span class="fas fa-lock"></span>
            <span class="unlock_text">Unlock?</span>
        </button>

        <input
            id="access_passcode_input"
            bind:value={entered_passcode}
            class="input w-32 transition-all"
            class:hidden={!show_passcode_input}
            type="text"
            placeholder="Access code"
            />
        <!-- <div class="current_text transition-all">{$ae_loc.access_type}</div> -->
        {/if}
</section>


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

    padding: .5rem;

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

    border-top: solid thin hsla(0,0%,0%,.5);
    border-left: solid thin hsla(0,0%,0%,.5);
    border-bottom: solid thin hsla(0,0%,0%,.5);
    border-top-left-radius: .5em;
    border-bottom-left-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-Quick-Access-Type:hover {
    /* lightyellow */
    /* background-color: hsla(60,100%,90%,.95); */
    /* background-color: rgba(var(--color-surface-500) / 1); */

    border-top: solid thin hsla(0,0%,0%,.95);
    border-left: 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;
}

/* #Access-Type .unlock_text {
    transition: width 2s, height 2s, background-color 2s, transform 2s;
} */
/* END: Svelte Access Type component  */

.access_type_unlock_btn .unlock_text {
    display: none;
}

.access_type_unlock_btn:hover .unlock_text {
    display: initial;
    /* outline: solid thin red; */
}

.ae_access_type .current_text {
    display: none;
}

.ae_access_type:hover .current_text {
    display: initial;
    /* outline: solid thin red; */
}
</style>
