<script lang="ts">
    interface Props {
        /** @type {import('./$types').PageData} */
        data: any;
    }

    let { data }: Props = $props();

    let log_lvl: number = 0;
    // console.log(`ae_events_pres_mgmt event [slug] +page.svelte data:`, data);

    // Imports
    import { onMount } from 'svelte';

    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import Element_data_store from '$lib/elements/element_data_store_v3.svelte';

    let ae_promises: key_val = {};
    let ae_tmp: key_val = {};
    let ae_triggers: key_val = {};

    import { liveQuery } from 'dexie';
    import { core_func } from '$lib/ae_core/ae_core_functions';
    import { db_events } from '$lib/ae_events/db_events';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig_kv
    } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';

    import Comp_event_location_obj_li from './ae_comp__event_location_obj_li.svelte';
    import Locations_page_menu from './locations_page_menu.svelte';
    // import Sign_in_out from './../../sign_in_out.svelte';

    import { browser } from '$app/environment';

    // Variables
    if (browser) {
        console.log('Browser environment detected.');
    }

    // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
    // $slct.account_id = data.account_id;
    // console.log(`$slct.account_id = `, $slct.account_id);
    let ae_acct = data[data.account_id];
    // console.log(`ae_acct = `, ae_acct);

    $ae_loc.url_origin = data.url.origin;

    $events_slct.event_id = ae_acct.slct.event_id;

    let lq__event_obj = $derived(
        liveQuery(async () => {
            let results = await db_events.event.get($events_slct.event_id);
            return results;
        })
    );

    let lq__event_location_obj_li = $derived(
        liveQuery(async () => {
            let results = await db_events.location
                .where('event_id')
                .equals(ae_acct.slct.event_id)
                .sortBy('name');
            return results;
        })
    );

    // *** Functions and Logic
    onMount(() => {
        if (log_lvl) {
            console.log('Events [event_id] Locations: +page.svelte');
        }
    });
</script>

<svelte:head>
    <title>
        Locations: {ae_util.shorten_string({
            string: $lq__event_obj?.name ?? 'Loading...',
            max_length: 12
        })} ({$lq__event_obj?.event_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
    </title>
</svelte:head>

<section
    class="
        ae_events_pres_mgmt_event_location
        md:container
        flex flex-col gap-1
        items-center
        justify-start
        mx-auto
        py-1 px-2 pb-16
        h-full
        min-w-full
        max-w-max
        "
>
    <Locations_page_menu {lq__event_obj} />

    {#if !$lq__event_location_obj_li}
        <div>
            <span class="fas fa-spinner fa-spin m-1"></span>
            <span>Loading locations...</span>
        </div>
    {:else}
        <header class="ae_module_header">
            <h2
                class="
            text-2xl font-bold text-center
            flex flex-row gap-0.25 items-center justify-between w-full
            "
            >
                <span class="flex flex-row gap-1 items-center">
                    <span class="fas fa-map-marked m-1 text-neutral-800/80"
                    ></span>
                    Locations/Rooms
                    <!-- Button to toggle between the regular location view and managing locations??? -->
                </span>
                <!-- Locations for: -->
                {#if $lq__event_obj?.cfg_json?.short_name}
                    {@html $lq__event_obj?.cfg_json.short_name ??
                        ae_snip.html__not_set}
                {:else}
                    {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
                {/if}
            </h2>
        </header>

        <Element_data_store
            ds_code="events__pres_mgmt__locations_msg"
            ds_name="Default: Events - Pres Mgmt Locations Message"
            ds_type="html"
            for_type="event"
            for_id={$lq__event_obj?.event_id}
            class_li="w-full max-w-(--breakpoint-lg) text-lg text-blue-500 font-bold text-center p-1 m-auto border border-blue-200 rounded-md bg-blue-100 space-y-2"
            hide={!$ae_loc.manager_access ||
                $events_loc.pres_mgmt.hide__locations_msg}
            show_edit={false}
            show_edit_btn={true}
        />
    {/if}

    <Comp_event_location_obj_li
        {lq__event_location_obj_li}
        link_to_id={$events_slct?.event_id ?? ''}
    />
</section>

<style lang="postcss">
</style>
