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

import { browser } from '$app/environment';
// import { goto, invalidate, pushState, replaceState } from '$app/navigation';

import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Comp_event_session_obj_li from '../../ae_comp__event_session_obj_li.svelte';

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 } 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 Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
import Event_page_menu from './../../event_page_menu.svelte';


// 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);

// $events_slct.event_id = ae_acct.slct.event_id;
// $events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;

// import Leads_add_scan from './leads_add_scan.svelte';
// import Sessions_list from './sessions_list.svelte';
// import Leads_manage from './leads_manage.svelte';
// import Leads_payment from './leads_payment.svelte';

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

// JSON formatted configuration options for an event, and specifically for the presentation management module.
$: if ($lq__event_obj?.mod_pres_mgmt_json) {
    // if (log_lvl) {
    //     console.log(`*** Event Pres Mgmt JSON *** pres_mgmt_cfg_local`, $events_loc.pres_mgmt);
    // }
    // $events_loc.pres_mgmt =
    events_func.sync_config__event_pres_mgmt({
        pres_mgmt_cfg_remote: $lq__event_obj.mod_pres_mgmt_json,
        pres_mgmt_cfg_local: $events_loc.pres_mgmt,
        log_lvl: log_lvl,
    });
}


// let event_obj_v2 = db_events.events.get($events_slct.event_id);

// let lq__event_session_obj_li = liveQuery(
//     () => db_events.sessions
//     .where('event_id')
//     .equals($events_slct.event_id)
//     .toArray()
// );

// let event_session_id_random_li: string[]|any = ['RZTY-31-68-30'];
// let event_session_id_random_li: Array<string> = ['RZTY-31-68-30'];
let event_session_id_random_li: Array<string> = [];

// let lq_kv__event_session_obj_li = liveQuery(
//     () => db_events.sessions
//     .bulkGet(event_session_id_random_li)
// );

// OMG THIS WORKS!!! 2024-09-17
// Using the $: seems to have fixed it along with the async await?
$: lq_kv__event_session_obj_li = liveQuery(async () => {
    let results = await db_events.sessions
    .bulkGet(event_session_id_random_li);

    return results;
});

// let lq_kv__event_session_obj_li = liveQuery(
//     () => db_events.sessions
//     .bulkGet(event_session_id_random_li)
//     .then(results => {
//         if (log_lvl) {
//             console.log(`TEST LQ - bulkGet Results:`, results);
//         }
//         // If the results are an array
//         if (results.length == 1) {
//             // If the first item is undefined we need to do something.
//             // if (results[0] == undefined) {
//             //     console.log('TEST LQ - Something went wrong! No sessions found?');
//             //     // return [];
//             //     // return [{ id: '' }];
//             //     // return 'NOTHING???';
//             // }
//             // return results;
//         }else if (results.length > 1) {
//             // return results;
//         } else {
//             // return ['No sessions found.'];
//         }
//         // return results;
//     })
//     .catch(error => {
//         console.error(`TEST LQ - bulkGet Error: ${error}`);
//         // return ['TEST LQ - No sessions found.'];
//         // return null;
//     })
//     .finally(() => {
//         console.log(`TEST LQ - bulkGet Finally:`, $lq_kv__event_session_obj_li);
//     })
// );

// let lq_kv__event_session_obj_li = liveQuery(
//     () => db_events.sessions
//     .bulkGet(event_session_id_random_li)
//     .then(results => {
//         // console.log(`LQ Results:`, results);
//         // If the results are an array
//         if (results.length == 1) {
//             // If the first item is undefined we need to do something.
//             if (results[0] == undefined) {
//                 console.log('Something went wrong! No sessions found?');
//                 // return [];
//                 // return [{ id: '' }];
//                 // return 'NOTHING???';
//             }
//             return results;
//         }else if (results.length > 1) {
//             return results;
//         } else {
//             return ['No sessions found.'];
//         }
//         // return results;
//     })
//     .catch(error => {
//         console.error(`LQ Error: ${error}`);
//         return ['No sessions found.'];
//     })
//     .finally(() => {
//         console.log(`LQ Finally:`, $lq_kv__event_session_obj_li);
//     })
// );

let lq__event_location_obj_li = liveQuery(
    () => db_events.locations
        .where('event_id_random')
        .equals(ae_acct.slct.event_id)
        .sortBy('name')
);


// let load_obj_li_results: Promise<any>|key_val;
let search_submit_results: Promise<any>|key_val;

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


if ($events_loc.pres_mgmt?.save_search_text && $events_loc.pres_mgmt?.saved_search__session) {
    $events_sess.pres_mgmt.fulltext_search_qry_str = $events_loc.pres_mgmt.saved_search__session;
}
if ($events_loc.pres_mgmt?.save_search_text && $events_loc.pres_mgmt?.saved_search__session_location_name) {
    $events_sess.pres_mgmt.location_name_qry_str = $events_loc.pres_mgmt.saved_search__session_location_name;
}


// Functions and Logic
if (browser) {
    console.log('Events Event [slug]: +page.svelte');
    $events_trigger = 'load__event_session_obj_li';
}


// Updated 2024-06-12 late
$: if ($events_trigger == 'load__event_session_obj_li' && $events_slct.event_id) {
    console.log(`load__event_session_obj_li() $events_slct.event_id=${$events_slct.event_id}`);

    $events_trigger = null;

    if ($events_loc.pres_mgmt.save_search_text) {
        if (log_lvl) {
            console.log(`*** Save search text *** ${$events_loc.pres_mgmt.save_search_text}`);
        }
        $events_loc.pres_mgmt.saved_search__session = $events_sess.pres_mgmt.fulltext_search_qry_str;
        $events_loc.pres_mgmt.saved_search__session_location_name = $events_sess.pres_mgmt.location_name_qry_str;
    }

    if ( $events_sess.pres_mgmt.fulltext_search_qry_str?.length > 2 ) {
        console.log('*** Search string is valid ***');
        process_search_string($events_sess.pres_mgmt.fulltext_search_qry_str);
    } else if ( $ae_loc.authenticated_access ) {
        console.log('*** Administrator Access or Trusted Access ***');
        process_search_string($events_sess.pres_mgmt.fulltext_search_qry_str);
    } else {
        console.log('*** Check permissions and or search string. Not allowed or too short. ***');
        $events_slct.event_session_obj_li = [];
        event_session_id_random_li = [];
    }
}


function process_search_string(search_str: string) {
    console.log('process_search_string()');

    if (search_str?.length) {
        console.log(`*** Search string length: ${search_str.length} ***`);
        // $events_slct.event_session_obj_li = [];
        // $events_sess.pres_mgmt.fulltext_search_qry_str = '';
    } else {
        console.log(`*** Search string is empty ***`);
        // $events_slct.event_session_obj_li = [];
        // event_session_id_random_li = [];
        // return false;
    }

    // let type_code = $events_sess.pres_mgmt.search_badge_type_code;

    // let search_str = $events_sess.pres_mgmt.fulltext_search_qry_str.trim();

    let search_method = 'lk'; // 'ft', 'lk', 'eq'
    let ft_search_str_new = '';
    let lk_search_str_new = '';

    if (search_method == 'ft') {
        // Add quotes around the search string to make it an exact match.
        ft_search_str_new = `${search_str}`;
        // ft_search_str_new = `"${search_str}"`;
    } else if (search_method == 'lk') {
        if (search_str == null) {
            search_str = '';
        }
        // Add a wildcard to the search string to make it a like match.
        lk_search_str_new = search_str.trim().replace(',', ' ').replace(';', ' ').replaceAll('  ', '%').replaceAll(' ', '%');
        lk_search_str_new = `%${lk_search_str_new}%`;
    }

    console.log(`"${search_str}"`);

    let location_name = '';
    if ($events_sess.pres_mgmt.location_name_qry_str?.length) {
        location_name = $events_sess.pres_mgmt.location_name_qry_str;
        console.log(`Location name: ${location_name}`);
    }


    handle_search__event_session({
        ft_search_str: ft_search_str_new,
        lk_search_str: lk_search_str_new,
        and_lk_location_name: location_name,
        // fulltext_search_qry_str: ft_search_str_new,
        // ft_presenter_search_qry_str: null,
        // like_search_qry_str: lk_search_str_new,
        // like_presentation_search_qry_str: lk_search_str_new,
        // like_presenter_search_qry_str: lk_search_str_new,
        // params: params,
        try_cache: false,
        log_lvl: 0,
    });
}


async function handle_search__event_session(
        {
            ft_search_str = '',
            lk_search_str = '',
            and_lk_location_name = '',
            search_delay = 0,
            max_tries = 5,
            params = {
                'qry__enabled': $events_loc.pres_mgmt.qry_enabled ?? 'enabled',
                'qry__hidden': $events_loc.pres_mgmt.qry_hidden ?? 'not_hidden',
                'qry__limit': $events_loc.pres_mgmt.qry_limit__sessions ?? 35,
            },
            try_cache=false,
            log_lvl=1,
        }: {
            ft_search_str?: string,
            lk_search_str?: string,
            and_lk_location_name?: string,
            search_delay?: number, // In milliseconds
            max_tries?: number,
            params?: key_val,
            try_cache?: boolean,
            log_lvl?: number,
        }
    ) {
    console.log('handle_search__event_session()');

    if ($events_sess.pres_mgmt?.status_qry__search != null && $events_sess.pres_mgmt?.status_qry__search != 'done') {
        console.log('*** TEST SEARCH - $events_sess.pres_mgmt.status_qry__search != done ***');
        // WARNING: This is a temporary fix for the search string. It needs to be fixed in the future. Using lk_search_str for now.
        $events_sess.pres_mgmt.status_qry__last_request_str = lk_search_str;

        // We want to delay the initial search request to give the previous search request to finish.
        let random_delay = Math.floor(Math.random() * 50);
        search_delay += 50+random_delay;
    }

    log_lvl = 2;

    let count = 0;
    let request_loop = setInterval(() => {
        count++;
        if (log_lvl) {
            console.log(`*** TEST SEARCH - Search delay: ${search_delay} *** loop count=${count}`);
        }
        if (count >= max_tries) {
            console.log('*** TEST SEARCH - Max tries reached ***');
            clearInterval(request_loop);
        }

        if ($events_sess.pres_mgmt?.status_qry__search != null && $events_sess.pres_mgmt?.status_qry__search != 'done') {
            let random_delay = Math.floor(Math.random() * 25);
            search_delay += 25+random_delay;
            console.log(`*** TEST SEARCH - $events_sess.pres_mgmt.status_qry__search == loading wait *** search_delay=${search_delay}`);
            // $events_sess.status_qry__last_request_str = lk_search_str;
        } else {
            console.log('*** TEST SEARCH - $events_sess.pres_mgmt.status_qry__search != loading ***');

            $events_sess.pres_mgmt.status_qry__search = 'loading';

            search_submit_results = events_func.search__event_session({
                api_cfg: $ae_api,
                event_id: $events_slct.event_id,
                // type_code: type_code,
                fulltext_search_qry_str: ft_search_str,
                ft_presenter_search_qry_str: null,
                like_search_qry_str: lk_search_str,
                like_presentation_search_qry_str: lk_search_str,
                like_presenter_search_qry_str: lk_search_str,
                // external_event_id: $events_loc.pres_mgmt.default__external_registration_id,
                location_name: and_lk_location_name,
                params: params,
                try_cache: try_cache,
                log_lvl: 0,
            })
            .then(function (search_results) {
                // Processing the results from the search.
                $events_sess.pres_mgmt.status_qry__search = 'processing';
                $events_slct.event_session_obj_li = search_results;
                console.log(search_results);
                // $events_sess.pres_mgmt.status_qry__search = 'done';

                if (log_lvl) {
                    console.log('TEST SEARCH - Search done. Pulling out the event_session_id_randoms.');
                }
                // console.log(`TEST search: ${$lq_kv__event_session_obj_li}`);

                // 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 (search_results && search_results.length) {
                    for (let i = 0; i < search_results.length; i++) {
                        tmp_li.push($events_slct.event_session_obj_li[i].event_session_id_random);
                    }
                }
                event_session_id_random_li = tmp_li;
            })
            .finally(() => {


                // 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';

                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}`);
                }

            });
            clearInterval(request_loop);
        }
    }, search_delay);
}
</script>


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


<section
    class="
        ae_events_pres_mgmt_event
        md:container h-full mx-auto
        flex flex-col gap-1
        py-1 px-2 pb-16
        items-center
        min-w-100
        w-3/4
        max-w-max
        "
    >
    <!-- lg:bg-green-100
    xl:bg-green-200 -->


<Event_page_menu
    data={data}
    lq__event_obj={lq__event_obj}
    />

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

{#if $lq__event_obj}
<header>
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
<h3 class="h4 text-center">Presentations - Session Lookup</h3>
</header>
{/if}

<!-- This session search section should be moved to a separate Svelte component -->
<div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center">

<form
    on:submit|preventDefault={() => {
        $events_trigger = 'load__event_session_obj_li';
    }}
    autocomplete="off"
    class="form flex-grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
    >


    <!-- Show/Hide session location name search button -->
    <button
        type="button"
        class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all mx-1"
        class:hidden={!$ae_loc.authenticated_access}
        on:click={() => {
            $events_sess.pres_mgmt.location_name_qry_str = '';
            $events_loc.pres_mgmt.show_content__session_search_room_name = !$events_loc.pres_mgmt.show_content__session_search_room_name;
        }}
        title="Search by location name"
        >
        <span class="fas fa-search-location"></span>
    </button>

    <select
        name="location_name_list"
        id="session_location_name_list"
        bind:value={$events_sess.pres_mgmt.location_name_qry_str}
        class="input text-xs font-bold font-mono min-w-fit w-min max-w-40 transition-all mx-1"
        class:hidden={!$ae_loc.authenticated_access || !$events_loc.pres_mgmt.show_content__session_search_room_name}
        on:change={() => {
            $events_trigger = 'load__event_session_obj_li';
        }}
        >
        {#if $lq__event_location_obj_li}
            <option value="">Location?</option>
            {#each $lq__event_location_obj_li as event_location_obj}
                <option value={event_location_obj?.name}>{event_location_obj.name}</option>
            {/each}
        {/if}
    </select>

    <!-- <input
        type="search"
        name="location_name"
        placeholder="Location"
        id="session_location_name"
        bind:value={$events_sess.pres_mgmt.location_name_qry_str}
        on:keyup={() => {
            if ($events_sess.pres_mgmt?.location_name_qry_str && $events_sess.pres_mgmt.location_name_qry_str.length >= 3) {
                $events_trigger = 'load__event_session_obj_li';
            }
        }}
        class="input text-xs hover:text-lg font-bold font-mono w-28 transition-all mx-1"
        class:hidden={!$ae_loc.authenticated_access || !$events_loc.pres_mgmt.show_content__session_search_room_name}
        suggest="off"
        data-ignore="true"
        /> -->

    <button
        type="button"
        class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition-all mx-1"
        on:click={() => {
            $events_sess.pres_mgmt.fulltext_search_qry_str = '';
            $events_trigger = 'load__event_session_obj_li';
        }}
        title="Clear search text"
        >
        <!-- <span class="fas fa-backspace"></span> -->
        <!-- <span class="fas fa-broom"></span> -->
         <span class="fas fa-remove-format"></span>
        <!-- Clear text -->
    </button>

    <input
        type="search"
        placeholder="Search for a session"
        id="session_fulltext_search_qry_str"
        bind:value={$events_sess.pres_mgmt.fulltext_search_qry_str}
        class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1"
        on:keyup={() => {
            if ($events_sess.pres_mgmt?.fulltext_search_qry_str && $events_sess.pres_mgmt.fulltext_search_qry_str.length >= 3) {
                $events_trigger = 'load__event_session_obj_li';
            }
        }}
        autofocus
        suggest="off"
        data-ignore="true"
        />

    <button
        type="submit"
        class="btn btn-lg variant-ghost-success hover:variant-filled-success text-2xl font-bold w-48 transition-all mx-1"
        on:click={() => {

        }}
        title="Search for a session"
        >
        {#if $events_sess.pres_mgmt.status_qry__search == 'loading'}
            <span class="fas fa-spinner fa-spin"></span>
        {:else }
            <!-- Nothing -->
        {/if}
        <span class="fas fa-search mx-1"></span>
        Search
    </button>
</form>

</div>


<!-- {#await load_obj_li_results}
    <span class="modal-loading">
        <span class="fas fa-spinner fa-spin"></span>
        <span class="loading-text">
            Loading...
        </span>
    </span>
{:then load_obj_li_results}
    {#if load_obj_li_results}
    <span class="fas fa-check text-green-500"></span>
    <span class="saved-text">
        Loaded
    </span>
    {/if}
{/await} -->

<!-- count: {$lq_kv__event_session_obj_li?.length}???
count ids: {event_session_id_random_li?.length ?? 'nothing???'}??? -->

<!-- {#if $events_slct.event_session_obj_li?.length && $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length} -->
{#if $lq_kv__event_session_obj_li && $lq_kv__event_session_obj_li?.length > 0 && event_session_id_random_li && event_session_id_random_li?.length > 0}
<!-- <div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl overflow-x-scroll outline"> -->
<div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-white">
<Comp_event_session_obj_li
    lq__event_session_obj_li={lq_kv__event_session_obj_li}
    hide__session_location={$events_loc.pres_mgmt.hide__session_location}
    hide__session_poc={$events_loc.pres_mgmt.hide__session_poc}
    show__launcher_link={$ae_loc.manager_access || $ae_loc.administrator_access && $events_loc.pres_mgmt.show__launcher_link}
    show__launcher_link_legacy={$ae_loc.manager_access || $ae_loc.trusted_access && $events_loc.pres_mgmt.show__launcher_link_legacy}
    show__location_link={$events_loc.pres_mgmt.show_content__location_link}
    log_lvl={log_lvl}
    />
</div>
{:else}
<section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2">
    <div>
        <span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
        <strong>No results to show</strong>
        <span class="fas fa-exclamation-triangle text-2xl text-yellow-500"></span>
        <br>
        <div class="text-lg">
        Please use the search above to find your session.
        </div>
    </div>
    <div>
    <strong>Search by:</strong>
    <ul
        class="list-disc list-inside text-lg text-left"
        >
        <li>Session name</li>
        <li>Session description</li>
        <li>Presentation name</li>
        <li>Presenter names</li>
        <li>Presenter ID (member ID)</li>
    </ul>
    </div>
</section>
{/if}

{:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access}

    {#if $lq__event_obj}
    <header>
        <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
        <h3 class="h4 text-center">Event - Manage Files</h3>
    </header>
    {/if}

    <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 Event Files:
        </h3>

        <Comp_event_files_upload
            link_to_type="event"
            link_to_id={$lq__event_obj?.event_id}
            />

        <div class="overflow-x-auto w-max max-w-full">
        <Element_manage_event_file_li_wrap
            link_to_type={'event'}
            link_to_id={$lq__event_obj?.event_id_random}
            allow_basic={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random] || $events_loc.auth__kv.session[$lq__event_obj?.event_id_random]}
            allow_moderator={$events_loc.auth__kv.session[$lq__event_obj?.event_id_random]}
            container_class_li={''}
            />
        </div>
    </div>

{/if}
</section>


<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%, 0%, .5);
} */

/* 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%, 100%, .95);
    padding: 1rem;
    border-radius: .5rem;
    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);

    min-height: 30%;
    min-width: 80%;
} */
</style>
