<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(true);
					}}
				>
					<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>
