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

import { api } from '$lib/api';
import {
	ae_loc,
	ae_sess,
	ae_api,
	slct,
	slct_trigger
	} from '$lib/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_loc.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);
        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) {
        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) {
        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>
