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

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 Session_view from './../../session_view.svelte';
import Session_page_menu from './../../session_page_menu.svelte';
// import Sign_in_out from './../../sign_in_out.svelte';

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

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_session_id = ae_acct.slct.event_session_id;
// $events_slct.event_session_obj = ae_acct.slct.event_session_obj;
$events_slct.event_presentation_id = null;
// $events_slct.event_presentation_obj = null;
$events_slct.event_presentation_obj_li = ae_acct.slct.event_presentation_obj_li;
// $events_slct.event_file_obj_li = ae_acct.slct.event_file_obj_li;

if (!$events_loc.auth__person) {
    $events_loc.auth__person = {
        id: null,
        email: null,
        full_name: null,
        entered_key: null,
        entered_passcode: null,
    };
}

if (!$events_loc.auth__kv) {
    $events_loc.auth__kv = {
        session: {},
        presentation: {},
        presenter: {},
        person: {},
    };
}

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_session_obj = liveQuery(
    () => db_events.sessions.get(ae_acct.slct.event_session_id)
);

let lq__event_presentation_obj_li = liveQuery(
    () => db_events.presentations
        .where('event_session_id_random')
        .equals(ae_acct.slct.event_session_id)
        .sortBy('name')
);

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

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


onMount(() => {
    console.log('Events Session [slug]: +page.svelte');

    // console.log(`lq__auth__event_presenter_obj:`, $lq__auth__event_presenter_obj?.full_name);

    // let url_person_id = data.url.searchParams.get('person_id');
    // let url_person_pass = data.url.searchParams.get('person_pass');
    // let url_presentation_id = data.url.searchParams.get('presentation_id');
    // let url_presenter_id = data.url.searchParams.get('presenter_id');
    // let url_session_id = data.url.searchParams.get('session_id');

    // // This should be turned into a function to correctly authenticate the person and allow them access to their presentations and presenter details.
    // if (url_person_pass) {
    //     console.log(`ae_events_pres_mgmt session [slug] +page.svelte: event_session_id=${$events_slct.event_session_id}; person_id=${url_person_id}; person_pass=${url_person_pass}; presentation_id=${url_presentation_id}; presenter_id=${url_presenter_id}`);

    //     // Using temporary session values first.
    //     $events_sess.auth__entered_key = url_person_id;
    //     $events_sess.auth__entered_passcode = url_person_pass;

    //     $events_sess.auth__person.id = url_person_id;
    //     $events_sess.auth__person.presentation_id = url_presentation_id;
    //     $events_sess.auth__person.presenter_id = url_presenter_id;
    //     $events_sess.auth__person.session_id = url_session_id; // For POC or LCI Champions for sessions. Do not set for a presenter!

    //     $events_sess.auth__kv.person[url_person_id] = true;
    //     $events_sess.auth__kv.session[$events_slct.event_session_id] = true; // For POC or LCI Champions for sessions. Do not set for a presenter!
    //     $events_sess.auth__kv.presentation[url_presentation_id] = true;
    //     $events_sess.auth__kv.presenter[url_presenter_id] = true;

    //     // We need to set the selected presentation and presenter objects based on the respective IDs.
    //     if (url_presentation_id && url_presenter_id) {
    //         $events_slct.event_presentation_id = url_presentation_id;
    //         $events_slct.event_presenter_id = url_presenter_id;
    //     }

    //     // console.log('Remove the passcode from the URL.');
    //     // data.url.searchParams.delete('person_id');
    //     // data.url.searchParams.delete('person_pass');
    //     // data.url.searchParams.delete('presentation_id');
    //     // data.url.searchParams.delete('presenter_id');
    //     // data.url.searchParams.delete('session_id');

    //     // let new_url = data.url.toString()
    //     // console.log(new_url);
    //     // goto(new_url, {replaceState: true});
    //     if (url_presenter_id) {
    //         presenter_sign_in();
    //     }

    //     if (url_session_id) {
    //         session_sign_in();
    //     }
    // }
});


// function presenter_sign_in() {
//     console.log('Presenter sign in with URL values');

//     $ae_loc.authenticated_access = true;
//     $ae_loc.access_type = 'authenticated';

//     $events_loc.auth__person.id = $events_sess.auth__entered_key; // person_id
//     $events_loc.auth__person.entered_key = $events_sess.auth__entered_key; // also person_id in this case
//     $events_loc.auth__person.email = 'test@example.com';
//     $events_loc.auth__person.full_name = 'Test Person';

//     $events_loc.auth__kv.person[$events_sess.entered_key] = true;
//     $events_loc.auth__kv.session[$events_slct.event_session_id] = false; // Set to false for presenters.
//     $events_loc.auth__kv.presentation[$events_sess.auth__person.presentation_id] = true;
//     $events_loc.auth__kv.presenter[$events_sess.auth__person.presenter_id] = true;

//     // Setting again here... just because for now.
//     $events_slct.event_presentation_id = $events_sess.auth__person.presentation_id;
//     $events_slct.event_presenter_id = $events_sess.auth__person.presenter_id;
// }

// function session_sign_in() {
//     console.log('Session sign in with URL values');

//     $ae_loc.authenticated_access = true;
//     $ae_loc.access_type = 'authenticated';

//     $events_loc.auth__person.id = $events_sess.auth__entered_key; // person_id
//     $events_loc.auth__person.entered_key = $events_sess.auth__entered_key; // also person_id in this case
//     $events_loc.auth__person.email = 'test@example.com';
//     $events_loc.auth__person.full_name = 'Test Person';

//     $events_loc.auth__kv.person[$events_sess.entered_key] = true;
//     $events_loc.auth__kv.session[$events_slct.event_session_id] = true;
//     $events_loc.auth__kv.presentation[$events_sess.auth__person.presentation_id] = false; // Set to false for session POC (LCI Champions).
//     $events_loc.auth__kv.presenter[$events_sess.auth__person.presenter_id] = false; // Set to false for session POC (LCI Champions).

//     // Setting again here... just because for now.
//     // $events_slct.event_presentation_id = $events_sess.auth__person.presentation_id;
//     // $events_slct.event_presenter_id = $events_sess.auth__person.presenter_id;
// }

// function sign_out() {
//     $ae_loc.authenticated_access = false;
//     $ae_loc.access_type = 'anonymous';

//     $events_loc.auth__person = {
//         id: null,
//         email: null,
//         full_name: null,
//         entered_key: null,
//         entered_passcode: null,
//     };
//     $events_loc.auth__kv = {
//         session: {},
//         presentation: {},
//         presenter: {},
//         person: {},
//     };
// }
</script>


<svelte:head>
	<title>
        Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name, max_length: 12})} ({$lq__event_session_obj?.event_session_id}) - Pres Mgmt - {$events_loc?.title}
    </title>
</svelte:head>


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

<Session_page_menu
    data={data}
    lq__event_session_obj={lq__event_session_obj}
    lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
    />


{#if !$lq__event_session_obj}
<div>
    <span class="fas fa-spinner fa-spin m-1"></span>
    <span>Loading session information...</span>
</div>
{:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
<Session_view
    event_session_id={$lq__event_session_obj.event_session_id}
    lq__event_session_obj={lq__event_session_obj}
    lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
    lq__event_presentation_obj_li={lq__event_presentation_obj_li}
    />

{#if $ae_loc.trusted_access}
    <div>
        <h3 class="h4">
            <span class="fas fa-upload m-1"></span>
            Upload Session Files:
        </h3>
    <Comp_event_files_upload
        link_to_type="event_session"
        link_to_id={$lq__event_session_obj.event_session_id}
        />
    </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>
        Session Disabled
    </h2>
    <p>
        This session 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>
