<script lang="ts">
/** @type {import('./$types').PageData} */
export let data: any;
let log_lvl = 1;
// console.log(`ae_events_pres_mgmt location [slug] +page.svelte data:`, data);

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

import { clipboard } from '@skeletonlabs/skeleton';

import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
// import { api, send_email } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.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_functions';
import { db_events } from "$lib/db_events";
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';

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_v2.svelte';
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
import Location_view from './../../location_view.svelte';
import Location_page_menu from './../../location_page_menu.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[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);

$ae_loc.url_origin = data.url.origin;

$events_slct.event_id = ae_acct.slct.event_id;
// $events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_location_id = ae_acct.slct.event_location_id;
// $events_slct.event_location_obj = ae_acct.slct.event_location_obj;
$events_slct.event_session_id = null;
// $events_slct.event_session_obj = null;
$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
// $events_slct.event_file_obj_li = ae_acct.slct.event_file_obj_li;

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

if (!$events_sess.pres_mgmt) {
    $events_sess.pres_mgmt = {};
    // $events_sess.pres_mgmt.show_content__agree_text = null;
    // $events_sess.pres_mgmt.show_content__presenter_start = null;
}

// $events_sess.pres_mgmt.show_content__agree_text = false;
// $events_sess.pres_mgmt.show_content__presenter_start = false;

let lq__event_obj = liveQuery(
    () => db_events.events.get($events_slct.event_id)
);

let lq__event_location_obj = liveQuery(
    () => db_events.locations.get(ae_acct.slct.event_location_id)
);

let lq__event_session_obj_li = liveQuery(
    () => db_events.sessions
        .where('event_location_id_random')
        .equals(ae_acct.slct.event_location_id)
        .sortBy('start_datetime')
);

// let lq__auth__event_presenter_obj = liveQuery(
//     () => db_events.presenters.get($events_loc.auth__person.presenter_id ?? null)
// );

$slct.person_obj_kv = {}; // This is intended for the POC lookup list when generated.

if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__location_view) {
    $events_loc.pres_mgmt.show_content__location_view = null;
}

let event_session_id_random_li: Array<string>;
$: if ($lq__event_session_obj_li) {
    if (log_lvl) {
        console.log('Session list updated? Pulling out the event_session_id_random values.');
    }

    event_session_id_random_li = [];

    // We need to loop through the array of objects and get the event_session_id_random from each object a new list of event_session_id_randoms. Then we can use this list to get the full objects from the database.
    let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
    if ($lq__event_session_obj_li) {
        for (let i = 0; i < $lq__event_session_obj_li.length; i++) {
            tmp_li.push($lq__event_session_obj_li[i].event_session_id_random);
        }
    }
    event_session_id_random_li = tmp_li;

    // event_session_id_random_li = $events_slct.event_session_obj_li.map(session_obj => session_obj.event_session_id_random);

    // Finally done with the search.
    $events_sess.pres_mgmt.status_qry__search = 'done';
    // $events_sess.pres_mgmt.status_rpt[$events_sess.pres_mgmt.show_report] = 'done';

    if (log_lvl > 1) {
        console.log(`TEST SEARCH - event_session_id_random_li:`, event_session_id_random_li);
        // console.log(`TEST SEARCH - search live query: ${$lq_kv__event_session_obj_li}`);
    }

}

// Functions and Logic
onMount(() => {
    console.log('Events Location [slug]: +page.svelte');
});
</script>


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


<section
    class="ae_events_pres_mgmt_event_location
    md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
    >

<Location_page_menu
    data={data}
    event_location_id={$lq__event_location_obj?.event_location_id}
    lq__event_location_obj={lq__event_location_obj}
    />

{#if !$lq__event_location_obj}

<div>
    <span class="fas fa-spinner fa-spin m-1"></span>
    <span>Loading location information...</span>
</div>

{:else if $lq__event_location_obj?.enable || $ae_loc.trusted_access}

<h2 class="h2 text-center rounded-md p-2 bg-gray-300">
    {@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
</h2>

{#if !$events_loc.pres_mgmt.show_content__location_view || $events_loc.pres_mgmt.show_content__location_view == 'default'}

    <!-- General information about the location -->
    <Location_view
        show__launcher_link={$events_loc.pres_mgmt.show_content__launcher_link}
        show__launcher_link_legacy={$events_loc.pres_mgmt.show_content__launcher_link_legacy}
        event_location_id={$lq__event_location_obj?.event_location_id}
        lq__event_obj={lq__event_obj}
        lq__event_location_obj={lq__event_location_obj}
        lq__event_session_obj_li={lq__event_session_obj_li}
        />

    <!-- Sessions in the location -->
    <section>

        {#if $lq__event_session_obj_li && $lq__event_session_obj_li?.length > 0 && event_session_id_random_li && event_session_id_random_li?.length > 0}
            <Comp_event_session_obj_li
                lq__event_obj={lq__event_obj}
                link_to_type={'event_location'}
                link_to_id={$events_slct.event_location_id}
                event_session_id_random_li={event_session_id_random_li}
                lq__event_session_obj_li={lq__event_session_obj_li}
                hide__session_poc={$events_loc.pres_mgmt.hide__session_poc}
                hide__session_location={true}
                show__session_files={$events_loc.pres_mgmt.show_content__session_files}
                show__session_presentations={$events_loc.pres_mgmt.show_content__session_presentations}
                show__launcher_link={$events_loc.pres_mgmt.show_content__launcher_link}
                show__launcher_link_legacy={$events_loc.pres_mgmt.show_content__launcher_link_legacy}
                show__location_link={$events_loc.pres_mgmt.show_content__location_link}
                >
            </Comp_event_session_obj_li>
        {:else if $lq__event_session_obj_li && $lq__event_session_obj_li?.length == 0}
            <div class="bg-red-100 p-4 border border-red-200 rounded-md">
                <h2 class="h3">
                    <span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
                    No Sessions Found
                </h2>
                <p>
                    There are no sessions found for this location.
                </p>
            </div>
        {:else if event_session_id_random_li?.length > 0}
            <div class="text-center">
                <span class="fas fa-spinner fa-spin m-1"></span>
                <span>Loading session list...</span>
            </div>
        {/if}

    </section>

{:else if $events_loc.pres_mgmt.show_content__location_view == 'manage_files' && $ae_loc.trusted_access}
    <div>
        <h3 class="h5 text-center">
            <span class="fas fa-tasks m-1"></span>
            <span class="fas fa-mail-bulk m-1"></span>
            Manage and Upload Location Files:
        </h3>

        <Comp_event_files_upload
            link_to_type="event_location"
            link_to_id={$lq__event_location_obj.event_location_id}
            />

        <div class="overflow-x-auto w-max max-w-full">
        <Element_manage_event_file_li_wrap
            link_to_type={'event_location'}
            link_to_id={$lq__event_location_obj?.event_location_id_random}
            allow_basic={$events_loc.auth__kv.location[$lq__event_location_obj.event_location_id_random] || $events_loc.auth__kv.location[$lq__event_location_obj?.event_location_id_random]}
            allow_moderator={$events_loc.auth__kv.location[$lq__event_location_obj.event_location_id_random]}
            container_class_li={''}
            />
        </div>
    </div>
{/if}

{:else}

<div class="bg-red-100 p-4 border border-red-200 rounded-md">
    <h2 class="h3">
        <span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
        Location Disabled
    </h2>
    <p>
        This location is currently disabled. Please contact the event organizer for more information.
    </p>
</div>

{/if}

</section>


{#if $events_sess.pres_mgmt?.show_form__sign_in}
    <div class="ae_quick_modal_container">
        <section class="ae_quick_popover">

            <div class="flex flex-col items-center">


            <!-- <div class="h-4 p-10"> -->

            <!-- </div> -->

            <section class="ae_modal_scrollfix">
            <button
                on:click={
                    () => {
                        $events_sess.pres_mgmt.show_content__agree_text = null;
                    }
                }
                class="btn btn-md variant-soft-secondary hover:variant-filled-secondary float-right"
                >
                <span class="fas fa-times m-1"></span>
                Close
            </button>





            </section>

            <!-- <div class="h-12"> -->
            <button
                on:click={
                    () => {
                        $events_sess.pres_mgmt.show_content__agree_text = null;
                    }
                }
                class="btn btn-md variant-soft-secondary hover:variant-filled-secondary"
                >
                <span class="fas fa-times m-1"></span>
                Close
            </button>
            <!-- </div>   -->

            </div>

        </section>
    </div>
{/if}



<style lang="postcss">
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
div.ae_quick_modal_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: hsla(0, 0%, 50%, .75);
    /* padding: 1rem; */
    /* border: solid thick red; */
}

/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
section.ae_quick_popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: hsla(0, 0%, 97%, .97);
    /* margin-top: 1rem;
    margin-bottom: 2rem; */
    /* padding: 1rem;
    padding-top:4rem; */
    /* padding-bottom: 4rem; */
    border: solid thin hsla(0, 0%, 0%, .9);
    border-radius: .5rem;
    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);

    min-height: 30%;
    /* max-height: 100vh; */
    min-width: 80%;

    /* overflow-y: auto; */
}
</style>
