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

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

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

	let ae_account_obj_get_promise;
	let ae_sponsorship_obj_li_get_promise;

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

	if ($ae_loc.account_id) {
		$slct.account_id = $ae_loc.account_id;
		// handle_load_ae_account_obj_id({account_id: $slct.account_id, try_cache: false});
		handle_load_ae_sponsorship_obj_li({ account_id: $slct.account_id, try_cache: false });
	}

	async function handle_load_ae_account_obj_id({ account_id, try_cache = false }) {
		console.log('*** handle_load_account_obj_id() ***');

		let params = {};

		$ae_sess.hub.account_id_qry_status = 'loading';
		ae_account_obj_get_promise = api
			.get_ae_obj_id_crud({
				api_cfg: $ae_api,
				obj_type: 'account',
				obj_id: account_id,
				use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
				use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
				params: params,
				log_lvl: 0
			})
			.then(function (account_obj_get_result) {
				if (account_obj_get_result) {
					$slct.account_obj = account_obj_get_result;
					console.log(`account object:`, $slct.account_obj);
				}

				// Auto show the selected account ID
				// Is this pushState needed here?
				// Set the URL param "account_id" to the current account ID.
				const url = new URL(location.href);
				url.searchParams.set('account_id', $slct.account_id);
				history.pushState({}, '', url);

				// Is this postMessage needed here?
				let message = { account_id: $slct.account_id };
				window.parent.postMessage(message, '*');
			})
			.catch(function (error: any) {
				console.log('No results returned or failed.', error);
			});

		return ae_account_obj_get_promise;
	}

	async function handle_load_ae_sponsorship_obj_li({ account_id, try_cache = true }) {
		console.log('*** handle_load_ae_sponsorship_obj_li() ***');
		// console.log($ae_loc.mod.sponsorships);

		// let fulltext_search_qry_str = ($ae_loc.mod.sponsorships && $ae_loc.mod.sponsorships.fulltext_search_qry_str ? $ae_loc.mod.sponsorships.fulltext_search_qry_str : '');
		// let qry_virtual = $ae_loc.mod.sponsorships.qry_virtual;
		// let qry_physical = $ae_loc.mod.sponsorships.qry_physical;
		// let qry_type = $ae_loc.mod.sponsorships.qry_type;

		let enabled = $ae_loc.mod.sponsorships.enabled;
		let hidden = $ae_loc.mod.sponsorships.hidden;
		let limit = $ae_loc.mod.sponsorships.limit;
		let offset = $ae_loc.mod.sponsorships.offset;

		let params = {};
		// params['example1'] = 'all';
		// params['example2'] = false;

		let params_json: key_val = {};
		// if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
		//     params_json['ft_qry'] = {
		//         'default_qry_str': fulltext_search_qry_str,
		//         'location_address_json': fulltext_search_qry_str,
		//         'contact_li_json': fulltext_search_qry_str,
		//         'address_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
		//         'contact_1_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
		//         };
		// }

		// if (qry_virtual || qry_physical || qry_type) {
		//     params_json['and_qry'] = {};
		//     if (qry_virtual) params_json['and_qry']['virtual'] = true;
		//     if (qry_physical) params_json['and_qry']['physical'] = true;
		//     if (qry_type) params_json['and_qry']['type'] = qry_type;
		// }

		// console.log('params_json:', params_json);
		// console.log(params_json);

		// NOTE: I am not sure if this is actually needed. It may save a little space in the URL.
		// if (JSON.stringify(params_json) == JSON.stringify({})) {
		//     params_json = null;
		// }
		$ae_loc.mod.sponsorships.qry_status = 'loading';
		ae_sponsorship_obj_li_get_promise = api
			.get_ae_obj_li_for_obj_id_crud({
				api_cfg: $ae_api,
				obj_type: 'sponsorship',
				for_obj_type: 'account',
				for_obj_id: account_id,
				use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
				use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
				enabled: enabled,
				hidden: hidden,
				order_by_li: { priority: 'DESC', sort: 'DESC', updated_on: 'DESC', created_on: 'DESC' },
				// order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
				limit: limit,
				offset: offset,
				params_json: params_json,
				params: params,
				log_lvl: 0
			})

			.then(function (sponsorship_obj_li_get_result) {
				if (sponsorship_obj_li_get_result) {
					$slct.sponsorship_obj_li = sponsorship_obj_li_get_result;
					// console.log(`Sponsorship list:`, $slct.sponsorship_obj_li);
				} else {
					$slct.sponsorship_obj_li = [];
				}
			})
			.catch(function (error: any) {
				console.log('No results returned or failed.', error);
			})
			.finally(function () {
				$ae_loc.mod.sponsorships.qry_status = 'done';
			});

		return ae_sponsorship_obj_li_get_promise;
	}
</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">Aether - Sponsorships (testing)</h1>

		<div class="flex justify-center space-x-2"></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>
