<script lang="ts">
interface Props {
    data_url: any;

    lq__event_obj: any;

    lq__event_event_file_obj_li: any;
    lq__location_event_file_obj_li: any;
    slct__event_file_id?: string|null;

    lq__event_location_obj_li: any;
    lq__event_location_obj?: any;
    slct__event_location_id?: string|null;

    loading__session_li_status?: null|boolean|string;
    lq__event_session_obj_li: any;
    loading__session_id_status?: null|boolean|string;
    lq__event_session_obj?: any;
    slct__event_session_id?: string|null;

    trigger_reload__event_obj_id?: boolean|null|string;
    trigger_reload__event_session_obj_id?: boolean|null|string;
    trigger_reload__event_session_obj_li?: boolean;
    trigger_reload__event_location_obj_id?: boolean|null|string;
    trigger_reload__event_location_obj_li?: boolean;

    log_lvl?: number;
}

let {
    data_url,

    lq__event_obj,

    lq__event_event_file_obj_li,
    lq__location_event_file_obj_li,
    slct__event_file_id = $bindable(null),

    lq__event_location_obj_li,
    lq__event_location_obj,
    slct__event_location_id = $bindable(null),

    loading__session_li_status = $bindable(null),
    lq__event_session_obj_li,
    loading__session_id_status = $bindable(null),
    lq__event_session_obj,
    slct__event_session_id = $bindable(null),

    trigger_reload__event_obj_id = $bindable(false),
    trigger_reload__event_session_obj_id = $bindable(false),
    trigger_reload__event_session_obj_li = $bindable(false),
    trigger_reload__event_location_obj_id = $bindable(false),
    trigger_reload__event_location_obj_li = $bindable(false),

    log_lvl = $bindable(0),
}: Props = $props();

// *** Import Svelte specific
// import { goto } from '$app/navigation';

// *** Import other supporting libraries
// import { liveQuery } from "dexie";

// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';

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

import Event_launcher_file_cont from './launcher_file_cont.svelte';
import Menu_location_list_menu from './menu_location_list.svelte';
import Menu_session_list_menu from './menu_session_list.svelte';


// let slct_event_location_id: string = $state($events_slct.event_location_id);


// *** Functions and Logic

$events_trigger = null;


let qry__enabled = 'enabled';
let qry__hidden = 'not_hidden';
if ($ae_loc.administrator_access) {
    qry__enabled = 'all';
    qry__hidden = 'all';
} else if ($ae_loc.trusted_access) {
    qry__enabled = 'enabled';
    qry__hidden = 'all';
} else {
    qry__enabled = 'enabled';
    qry__hidden = 'not_hidden';
}

let ae_promises: key_val = $state({
    get_li__event_file: null,
});

</script>


<div
    class="
        event_launcher_menu
        shrink h-full w-full max-w-full
        flex flex-col flex-wrap gap-1 items-center justify-start

        "
        >
        <!-- overflow-x-clip -->


{#if $lq__event_event_file_obj_li}
<div class="w-full flex flex-col gap-0.5 overflow-y-auto">
    <!-- <div class="text-xs text-neutral-800/80">
        <strong>
        Event Files:
        {#if $ae_loc.administrator_access}
            ({$lq__event_event_file_obj_li?.length}&times;)
        {/if}
        </strong>
    </div> -->
    {#each $lq__event_event_file_obj_li as event_file_obj, index}
        <Event_launcher_file_cont
            event_file_id={event_file_obj.event_file_id_random}
            event_file_obj={event_file_obj}
            hide_launch_icon={true}
            hide_meta={true}
            hide_created_on={true}
            hide_os={true}
            hide_size={true}
            show_bak_download={$ae_loc.trusted_access && $ae_loc.edit_mode}
            btn_size={'btn-sm'}
            text_size={'text-xs'}
            text_size_md={'text-xs'}
            session_type={event_file_obj?.event_session_type_code ?? 'oral'}
            open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
            modal_title={$lq__event_session_obj?.name}

            bind:modal__title={$events_sess.launcher.modal__title}
            bind:modal__open_event_file_id={$events_sess.launcher.modal__open_event_file_id}
            bind:modal__event_file_obj={$events_sess.launcher.modal__event_file_obj}
            />

        <button
            disabled={!$ae_loc.trusted_access}
            onclick={() => {
                // ae_promises[event_file_obj.event_file_id_random]
                ae_promises[event_file_obj?.event_file_id_random] = api.download_hosted_file({
                    api_cfg: $ae_api,
                    hosted_file_id: event_file_obj?.hosted_file_id_random,
                    return_file: true,
                    filename: event_file_obj?.filename,
                    auto_download: true,
                    log_lvl: 0
                });
            }}
            class="
                btn btn-sm
                text-xs w-full
                preset-tonal-primary
                hover:preset-tonal-success
                transition-all
                "
            title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
            >
            {#await ae_promises[event_file_obj.event_file_id_random]}
                <span class="fas fa-spinner fa-spin mx-1"></span>
                <span class="">
                    Downloading
                    {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
                        {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
                    {/if}
                    :
                </span>
            {:then}
                <!-- <span class="fas fa-download mx-1"></span> -->
                <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
                <!-- <span class="text-sm">
                Download:
                </span> -->
            {/await}

            <span class="grow">
            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
            </span>


            <!-- <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
            {event_file_obj?.filename} -->
        </button>
    {/each}
</div>
{/if}


{#if $ae_loc.edit_mode}
<Menu_location_list_menu
    data_url={data_url}
    lq__event_location_obj_li={lq__event_location_obj_li}
    slct_event_location_id={$events_slct.event_location_id}
    bind:loading__session_li_status={loading__session_li_status}
    />
{/if}


{#if $lq__location_event_file_obj_li}
<div class="w-full flex flex-col gap-0.5">
    {#each $lq__location_event_file_obj_li as event_file_obj, index}
        <Event_launcher_file_cont
            event_file_id={event_file_obj.event_file_id_random}
            event_file_obj={event_file_obj}
            hide_launch_icon={true}
            hide_meta={true}
            hide_created_on={true}
            hide_os={true}
            hide_size={true}
            show_bak_download={$ae_loc.trusted_access && $ae_loc.edit_mode}
            btn_size={'btn-sm'}
            text_size={'text-xs'}
            text_size_md={'text-xs'}
            session_type={event_file_obj?.event_session_type_code ?? 'oral'}
            open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
            modal_title={$lq__event_session_obj?.name}

            bind:modal__title={$events_sess.launcher.modal__title}
            bind:modal__open_event_file_id={$events_sess.launcher.modal__open_event_file_id}
            bind:modal__event_file_obj={$events_sess.launcher.modal__event_file_obj}
            />
    {/each}
</div>
{/if}


{#if $lq__event_session_obj_li}
<Menu_session_list_menu
    data_url={data_url}
    bind:slct__event_session_id={slct__event_session_id}
    bind:loading__session_id_status={loading__session_id_status}
    lq__event_session_obj_li={lq__event_session_obj_li}
    bind:trigger_reload__event_session_obj_id={trigger_reload__event_session_obj_id}
    />
{/if}


{#if $ae_loc.edit_mode}
<div
    class="
        w-full max-w-full
        flex flex-row gap-1 items-center justify-center
        "
        >
    <button
        onclick={() => {
            if ($events_loc.launcher.show_content__hidden_files) {
                $events_loc.launcher.show_content__hidden_files = false;
                $events_loc.launcher.hide_content__draft_files = true;
            } else {
                $events_loc.launcher.show_content__hidden_files = true;
                $events_loc.launcher.hide_content__draft_files = false;
            }

        }}
        class="
            btn btn-sm
            text-xs
            w-1/2 max-w-1/2
            preset-tonal-warning
            hover:preset-tonal-success
            transition-all
            "
        title="Toggle showing hidden files. Including files marked as 'draft'."
        >
        {#if $events_loc.launcher.show_content__hidden_files}
            <span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
            Hide Files
        {:else}
            <span class="fas fa-eye m-1 text-neutral-800/80"></span>
            All Files
        {/if}

    </button>
    <button
        onclick={() => {
            $events_loc.launcher.show_content__hidden_sessions = !$events_loc.launcher.show_content__hidden_sessions;
        }}
        class="
            btn btn-sm
            text-xs
            w-1/2 max-w-1/2
            preset-tonal-warning
            hover:preset-tonal-success
            transition-all
            "
        >
        {#if $events_loc.launcher.show_content__hidden_sessions}
            <span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
            Hide Sessions
        {:else}
            <span class="fas fa-eye m-1 text-neutral-800/80"></span>
            All Sessions
        {/if}
    </button>
</div>
{/if}


</div>