<script lang="ts">
// Imports
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
// import Element_ae_crud from '$lib/element_ae_crud.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, events_trig_kv } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';

import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_all.svelte';

// Exports
export let container_class_li: string|Array<string> = [];
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
// export let link_to_type: string;
// export let link_to_id: string;
export let lq__event_presentation_obj_li: any;
export let log_lvl: number = 0;

// Variables
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};

// Functions and Logic
</script>


<section
    class="
    ae_comp event_presentation_obj_li
    border border-2 border-dashed border-x-red-500 border-y-white
    sm:border-x-red-400 md:border-x-yellow-400 lg:border-x-gray-100
    px-0.5 py-2 space-y-2
    min-w-full
    w-full
    container overflow-x-scroll {container_class_li}
    "
    >

<div
    class="float-right flex flex-row items-center"
    >
    {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
    <button
        type="button"
        on:click={() => {
            console.log('Add Presentation');
            if (!confirm('Add a new presentation to the session? You will be able to edit the details after the presentation is created.')) {
                return;
            }

            let presentation_data = {
                event_id_random: $events_slct.event_id,
                event_session_id_random: $events_slct.event_session_id,
                name: 'TEMP Presentation Name',
                code: 'new_presentation',
                enable: true,
            }

            events_func.create_ae_obj__event_presentation({
                api_cfg: $ae_api,
                event_id: $events_slct.event_id,
                event_session_id: $events_slct.event_session_id,
                data_kv: presentation_data,
                log_lvl: 1,
            })
        }}
        class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
        >
        <span class="fas fa-plus mx-1"></span>
        Add Presentation
    </button>
    {/if}
</div>


<!-- <section class="ae_comp event_presentation_obj_li {container_class_li}"> -->


<h3 class="h5">
    Presentations:
    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
        class:hidden={!$lq__event_presentation_obj_li?.length}
        title="Presentations: {$lq__event_presentation_obj_li?.length ?? 'None'}"
        >
        <span class="fas fa-chalkboard-teacher m-1"></span>
        {@html ($lq__event_presentation_obj_li?.length ? `${$lq__event_presentation_obj_li?.length}&times;` : '')}
    </span>

    {#if !$lq__event_presentation_obj_li?.length}
        <span class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
            >
            <span class="fas fa-exclamation-triangle mx-1"></span>
            No presentations available.
        </span>
    {/if}
</h3>

<!-- Show presentations for this LiveQuery -->
{#if $lq__event_presentation_obj_li?.length}
    <ul
        class="space-y-4 p-4 m-2 bg-gray-100 rounded-md"
        >
    {#each $lq__event_presentation_obj_li as event_presentation_obj}
        <li
            class="space-y-2 border border-gray-200 p-2 rounded-md"
            >

        <div class="float-right space-2 flex flex-row items-center">
        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
        <button
            type="button"
            on:click={() => {
                console.log('Add Presenter');
                if (!confirm('Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.')) {
                    return;
                }

                let presenter_data = {
                    event_id_random: $events_slct.event_id,
                    event_session_id_random: $events_slct.event_session_id,
                    event_presentation_id_random: event_presentation_obj?.event_presentation_id_random,
                    given_name: 'New',
                    family_name: 'Presenter',
                    email: 'test+newpres@oneskyit.com',
                    code: 'new_presenter',
                    enable: true,
                }

                events_func.create_ae_obj__event_presenter({
                    api_cfg: $ae_api,
                    event_id: $events_slct.event_id,
                    event_session_id: $events_slct.event_session_id,
                    event_presentation_id: event_presentation_obj.event_presentation_id_random,
                    data_kv: presenter_data,
                    log_lvl: 1,
                })
            }}
            class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
            >
            <span class="fas fa-plus mx-1"></span>
            Add Presenter
        </button>
        {/if}


        </div>

        <h4 class="h5 rounded-md p-2 bg-gray-200">
            <Element_ae_crud
                api_cfg={$ae_api}
                object_type={'event_presentation'}
                object_id={event_presentation_obj?.event_presentation_id_random}
                field_name={'name'}
                field_type={'text'}
                field_value={event_presentation_obj?.name}
                allow_null={false}
                hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
                outline_element={false}
                show_crud={false}
                display_inline={true}
                display_block_edit={true}
                class_li={''}
                on:ae_crud_updated={e => {
                    console.log(`ae_crud_updated:`, e.detail);

                    events_func.load_ae_obj_id__event_presentation({
                        api_cfg: $ae_api, event_presentation_id: event_presentation_obj.event_presentation_id_random, log_lvl: 1
                    })
                    .then(function (load_results) {
                    })
                    .then(function (load_results) {
                        // $events_trigger = 'load__event_presentation_obj_id';
                        // $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id_random;
                    });
                }}
                >
                <!-- <strong class="text-sm">Name/Title:</strong> -->
                "{event_presentation_obj?.name}"
            </Element_ae_crud>
            <!-- "{event_presentation_obj.name}" -->
            {#if event_presentation_obj?.code || event_presentation_obj?.abstract_code}
            <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
                title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}"
                >
                <span class="fas fa-barcode"></span>
                {event_presentation_obj?.code ?? ''} {event_presentation_obj?.abstract_code ?? ''}
            </span>
            {/if}
        </h4>

        <div
            class:hidden={!$events_loc.pres_mgmt.show_content__presentation_description}
            >
        <Element_ae_crud
            api_cfg={$ae_api}
            object_type={'event_presentation'}
            object_id={event_presentation_obj?.event_presentation_id_random}
            field_name={'description'}
            field_type={'textarea'}
            field_value={event_presentation_obj?.description}
            allow_null={false}
            hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
            outline_element={false}
            show_crud={false}
            display_inline={true}
            display_block_edit={true}
            textarea_rows={15}
            class_li={''}
            on:ae_crud_updated={e => {
                console.log(`ae_crud_updated:`, e.detail);

                events_func.load_ae_obj_id__event_presentation({api_cfg: $ae_api, event_presentation_id: event_presentation_obj.event_presentation_id_random, log_lvl: 1});
            }}
            >
            <strong class="text-sm">
                Description:
            </strong>

            {#if event_presentation_obj?.description}
            <button
                type="button"
                on:click={() => {
                    console.log('Show/Hide Description');
                    if ($events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id_random) {
                        $events_sess.pres_mgmt.show_content__presentation_description = null;

                        // Was testing with LiveQuery
                        $events_slct.event_presentation_id = null;
                    } else {
                        $events_sess.pres_mgmt.show_content__presentation_description = event_presentation_obj.event_presentation_id_random;

                        // Was testing with LiveQuery
                        $events_slct.event_presentation_id = event_presentation_obj.event_presentation_id_random;
                    }
                }}
                class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
                >
                {#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id_random}
                    <span class="fas fa-eye-slash mx-1"></span>
                    <span>Hide Description</span>
                {:else}
                    <span class="fas fa-eye mx-1"></span>
                    <span>Show</span>
                {/if}
            </button>

            <pre
                class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
                class:hidden={$events_sess.pres_mgmt.show_content__presentation_description !== event_presentation_obj.event_presentation_id_random}
                >{event_presentation_obj.description}</pre>

            {:else}
                {@html ae_snip.html__not_set}
            {/if}
        <!-- {:else}
            <div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
                class:hidden={!$ae_loc.administrator_access}
                >
                <span class="fas fa-exclamation-triangle mx-1"></span>
                No description provided.
            </div>
        {/if} -->
        </Element_ae_crud>
        </div>

        <!-- Show presenters for this presentation -->
        {#if event_presentation_obj?.event_presentation_id_random}
            <Comp_event_presenter_obj_li
                link_to_type={'event_presentation'}
                link_to_id={event_presentation_obj?.event_presentation_id_random}
                event_presenter_id_random_li={[]}
                log_lvl={log_lvl}
                >
            </Comp_event_presenter_obj_li>
        {/if}


        <!-- Show files for this presentation -->
        <Element_manage_event_file_li_wrap
            link_to_type={'event_presentation'}
            link_to_id={event_presentation_obj?.event_presentation_id_random}
            allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] || $events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
            allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
            container_class_li={''}
            />

        </li>
    {/each}
    </ul>
{:else}
    <!-- <p class:hidden={display_mode != 'default'}>
        No presentations available to show at this time
    </p> -->
{/if}


</section>


<style>

</style>
