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

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

    let log_lvl: number = $state(0);

    // Imports
    import { untrack } from 'svelte';
    import { browser } from '$app/environment';
    import { ae_util } from '$lib/ae_utils/ae_utils';

    import { liveQuery } from 'dexie';
    import { db_events } from '$lib/ae_events/db_events';
    import {
        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 Comp_event_files_upload from '../../../../ae_comp__event_files_upload.svelte';
    import Comp_event_session_obj_li from '../../../../ae_comp__event_session_obj_li.svelte';
    import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_direct.svelte';
    import Location_view from './location_view.svelte';
    import Location_page_menu from './location_page_menu.svelte';

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

    $effect(() => {
        if (browser) {
            console.log('Browser environment detected.');
        }
    });

    $effect(() => {
        if (!ae_acct) return;
        untrack(() => {
            $ae_loc.url_origin = data.url.origin;

            $events_slct.event_id = ae_acct.slct.event_id;
            $events_slct.event_location_id = ae_acct.slct.event_location_id;
            $events_slct.event_session_id = null;
            $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;

            if (!$events_loc.pres_mgmt) {
                $events_loc.pres_mgmt = {};
            }

            if (!$events_sess.pres_mgmt) {
                $events_sess.pres_mgmt = {};
            }
        });
    });

    let lq__event_obj = $derived(
        liveQuery(async () => {
            if (!ae_acct?.slct.event_id) return null;
            return await db_events.event.get(ae_acct.slct.event_id);
        })
    );

    let lq__event_location_obj = $derived(
        liveQuery(async () => {
            if (!ae_acct?.slct.event_location_id) return null;
            return await db_events.location.get(
                ae_acct.slct.event_location_id
            );
        })
    );

    let lq__event_session_obj_li = $derived(
        liveQuery(async () => {
            if (!ae_acct?.slct.event_location_id) return [];
            return await db_events.session
                .where('event_location_id')
                .equals(ae_acct.slct.event_location_id)
                .sortBy('start_datetime');
        })
    );
</script>

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

<section class="ae_events_pres_mgmt_event_location container mx-auto py-1 px-2 pb-16 space-y-6">
    <Location_page_menu
        data={data}
        lq__event_location_obj={lq__event_location_obj}
        lq__event_obj={lq__event_obj}
    />

    {#if !$lq__event_location_obj}
        <div class="flex items-center justify-center py-10">
            <span class="fas fa-spinner fa-spin mr-2"></span>
            <span>Loading location...</span>
        </div>
    {:else}
        {#if !$lq__event_location_obj.enable && !$ae_loc.trusted_access}
            <div class="bg-warning-100 p-4 border border-warning-300 rounded-md">
                <h2 class="h3">
                    <span class="fas fa-exclamation-triangle text-warning-500 m-1"></span>
                    Location Disabled
                </h2>
                <p>This location is currently disabled. Please contact the event organizer for more information.</p>
            </div>
        {:else}
            <div class="bg-surface-50-950 p-4 rounded-xl shadow-sm border border-surface-200-800">
                <Location_view {lq__event_location_obj} />
            </div>

            <div class="space-y-4">
                <h3 class="h3 font-bold border-b border-surface-500/20 pb-2">Sessions at this Location</h3>
                <Comp_event_session_obj_li
                    lq__event_session_obj_li={lq__event_session_obj_li}
                    hide__session_location={true}
                    {log_lvl}
                />
            </div>

            {#if $ae_loc.trusted_access}
                <div class="space-y-4">
                    <h3 class="h3 font-bold border-b border-surface-500/20 pb-2">Location Files</h3>
                    <Comp_event_files_upload
                        link_to_type="event_location"
                        link_to_id={$lq__event_location_obj.event_location_id}
                    />
                    <Element_manage_event_file_li_wrap
                        link_to_type="event_location"
                        link_to_id={$lq__event_location_obj.event_location_id}
                    />
                </div>
            {/if}
        {/if}
    {/if}
</section>
