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

import { PUBLIC_TESTING } from '$env/static/public';
console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);

type key_val = {
    [key: string]: any;
};

import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
console.log(api);
console.log($ae_loc, $ae_sess, $ae_api);


onMount(() => {
    console.log('Root: +page.svelte');
	let url = window.location.href;
	console.log(url);
});


let data_store_obj_get_promises: key_val = {};
let get_ds_hub_site_header_promise = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});

async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
    console.log('*** handle_get_data_store_obj_w_code() ***');

    // let get_item_result = window.localStorage.getItem(code);
    // localStorage.getItem(code);

    // if ($ae_loc_test_store) {
    //     $ae_loc.hub.ds[code] = $ae_loc_test_store;
    // } else {
    //     console.log('Get local storage item miss.');
    // }

    data_store_obj_get_promises[code] = api.get_data_store_obj_w_code({
        api_cfg: $ae_api,
        data_store_code: code,
        data_type: data_type,
        log_lvl: 1
        })
    .then(function (get_data_store_result) {
        if (get_data_store_result) {

            if (data_type == 'text') {
                // console.log(get_data_store_result.text);
                $ae_loc.hub.ds[code] = get_data_store_result.text;
            } else if (data_type == 'json') {
                // console.log(get_data_store_result.json);
                $ae_loc.hub.ds[code] = get_data_store_result.json;
            }

            // console.log(`Code: ${$ae_loc.hub.ds[code]}`);
            // console.log(`Code:`, $ae_loc.hub.ds[code]);
        }
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });
}

</script>

<div class="container h-full mx-auto flex justify-center items-center">
	<div class="space-y-10 text-center flex flex-col items-center">
		<h1 class="h1">One Sky IT's new Aether App Template</h1>
		<h2 class="h2">Using Svelte, SvelteKit, Tailwind, Skeleton</h2>

		<div class="flex justify-center space-x-2">
			<a
				class="btn variant-filled"
				href="https://skeleton.dev/"
				target="_blank"
				rel="noreferrer"
			>
				Launch Documentation
			</a>
		</div>
		<div class="space-y-2">
			<p>Try editing the following:</p>
			<p><code class="code">/src/routes/+layout.svelte</code></p>
			<p><code class="code">/src/routes/+page.svelte</code></p>
		</div>
	</div>
</div>

<style lang="postcss">
/* figure {
	@apply flex relative flex-col;
}
figure svg,
.img-bg {
	@apply w-64 h-64 md:w-80 md:h-80;
}
.img-bg {
	@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
	animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
		glow 5s linear infinite;
}
@keyframes glow {
	0% {
		@apply bg-primary-400/50;
	}
	33% {
		@apply bg-secondary-400/50;
	}
	66% {
		@apply bg-tertiary-400/50;
	}
	100% {
		@apply bg-primary-400/50;
	}
}
@keyframes pulse {
	50% {
		transform: scale(1.5);
	}
} */
</style>
