<script lang="ts">
    interface Props {
        // Exports
        container_class_li?: string | Array<string>;
        display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
        // export let link_to_id: string;
        lq__event_presentation_obj_li: any;
        log_lvl?: number; // Variables
    }

    let {
        container_class_li = [],
        display_mode = 'default',
        lq__event_presentation_obj_li,
        log_lvl = 0
    }: Props = $props();

    // 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/stores/ae_stores';
    import { events_func } from '$lib/ae_events_functions';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig_kv
    } from '$lib/stores/ae_events_stores';
    import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
    import Comp_event_presenter_obj_li from '../events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
    import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_all.svelte';

    // export let link_to_type: string;

    // 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-dashed border-y-transparent border-r-transparent
    sm:border-l-red-400 md:border-l-yellow-400 lg:border-l-gray-100
    sm:dark:border-l-red-600 md:dark:border-l-yellow-600 lg:dark:border-l-gray-700
    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"
                onclick={() => {
                    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 = {
                        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 preset-tonal-warning hover:preset-filled-warning-500"
            >
                <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 text-success-800-400">
        <span class="text-sm">
            Presentations:

            {#if $lq__event_presentation_obj_li?.length}
                <span
                    class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
                    title="Count {$lq__event_presentation_obj_li.length ?? 'None'}"
                >
                    <span class="fas fa-list-ol mx-4"></span>
                    {$lq__event_presentation_obj_li.length ?? 'None'}&times;
                </span>
            {/if}

            <!-- {#if !lq__event_presentation_obj_li?.length}
        <span class="text-sm text-gray-500">
            <span class="fas fa-exclamation-triangle mx-1"></span>
            No presentations available to show at this time
        </span>
    {/if} -->
        </span>
    </h3>

    <!-- Show presentations for this LiveQuery -->
    {#if $lq__event_presentation_obj_li?.length}
        <ul class="space-y-4 p-4 m-2 rounded-md preset-filled-surface-400-600">
            {#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"
                                onclick={() => {
                                    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_presentation_id:
                                            event_presentation_obj?.event_presentation_id,
                                        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,
                                        data_kv: presenter_data,
                                        log_lvl: 1
                                    });
                                }}
                                class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
                            >
                                <span class="fas fa-plus mx-1"></span>
                                Add Presenter
                            </button>
                        {/if}
                    </div>

                    <h4 class="h5 rounded-md p-2 preset-filled-surface-300-700">
                        <span
                            class:hidden={!event_presentation_obj.start_datetime ||
                                $events_loc.pres_mgmt.hide__presentation_datetime}
                            class="text-base border-r-2 border-gray-800/50 px-1"
                        >
                            {ae_util.iso_datetime_formatter(
                                event_presentation_obj.start_datetime,
                                'dddd'
                            )}
                            @
                            <!-- , -->
                            <!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
                            {ae_util.iso_datetime_formatter(
                                event_presentation_obj.start_datetime,
                                $events_loc.pres_mgmt.time_format
                            )}
                        </span>

                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'event_presentation'}
                            object_id={event_presentation_obj?.event_presentation_id}
                            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,
                                        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;
                                    });
                            }}
                        >
                            <!-- <strong class="text-sm">Name/Title:</strong> -->
                            <span class="italic">
                                {event_presentation_obj?.name}
                            </span>
                        </Element_ae_crud>
                        <!-- "{event_presentation_obj.name}" -->

                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'event_presentation'}
                            object_id={event_presentation_obj?.event_presentation_id}
                            field_name={'code'}
                            field_type={'text'}
                            field_value={event_presentation_obj?.code}
                            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,
                                        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;
                                    });
                            }}
                        >
                            {#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !$events_loc.pres_mgmt.hide__presentation_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>
                            {:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
                                <span class="text-sm text-semibold text-success-800-400">
                                    <span class="fas fa-barcode"></span>
                                    Code:
                                    <span class="" title="No code provided for this presentation">
                                        {@html event_presentation_obj?.code ??
                                            ae_snip.html__not_set}
                                    </span>
                                </span>
                            {/if}
                        </Element_ae_crud>
                        <!-- Can not edit the abstract code here at this time. -->
                    </h4>

                    <div class:hidden={!($ae_loc.trusted_access && $ae_loc.edit_mode)}>
                        <span class="text-sm text-semibold text-success-800-400">
                            Date &
                            <button
                                type="button"
                                onclick={() => {
                                    if ($events_loc.pres_mgmt.time_hours == 12) {
                                        $events_loc.pres_mgmt.time_hours = 24;
                                        $events_loc.pres_mgmt.datetime_format = 'datetime_long';
                                        $events_loc.pres_mgmt.time_format = 'time_short';
                                    } else {
                                        $events_loc.pres_mgmt.time_hours = 12;
                                        $events_loc.pres_mgmt.datetime_format = 'datetime_12_long';
                                        $events_loc.pres_mgmt.time_format = 'time_12_short';
                                    }
                                }}
                            >
                                time
                            </button>
                            :</span
                        >
                        <span class="fas fa-calendar-alt text-success-800-400"></span>
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'event_presentation'}
                            object_id={event_presentation_obj?.event_presentation_id}
                            field_name={'start_datetime'}
                            field_type={'datetime'}
                            field_value={event_presentation_obj.start_datetime}
                            allow_null={false}
                            hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
                            outline_element={false}
                            show_crud={false}
                            display_inline={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
                                });
                                // $events_trigger = 'load__event_presentation_obj_id';
                                // $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
                            }}
                        >
                            {ae_util.iso_datetime_formatter(
                                event_presentation_obj.start_datetime,
                                'dddd'
                            )}
                            <!-- , -->
                            <!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
                            {ae_util.iso_datetime_formatter(
                                event_presentation_obj.start_datetime,
                                $events_loc.pres_mgmt.time_format
                            )}
                        </Element_ae_crud>
                        -
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'event_presentation'}
                            object_id={event_presentation_obj?.event_presentation_id}
                            field_name={'end_datetime'}
                            field_type={'datetime'}
                            field_value={event_presentation_obj.end_datetime}
                            allow_null={false}
                            hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
                            outline_element={false}
                            show_crud={false}
                            display_inline={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
                                });
                                // $events_trigger = 'load__event_presentation_obj_id';
                                // $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
                            }}
                        >
                            {ae_util.iso_datetime_formatter(
                                event_presentation_obj.end_datetime,
                                $events_loc.pres_mgmt.time_format
                            )}
                        </Element_ae_crud>
                    </div>

                    <div
                        class:hidden={!$events_loc.pres_mgmt
                            .show_content__presentation_description &&
                            !($ae_loc.trusted_access && $ae_loc.edit_mode)}
                    >
                        <Element_ae_crud
                            api_cfg={$ae_api}
                            object_type={'event_presentation'}
                            object_id={event_presentation_obj?.event_presentation_id}
                            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,
                                    log_lvl: 1
                                });
                            }}
                        >
                            <span class="text-sm text-semibold text-success-800-400">
                                Description:
                            </span>

                            {#if event_presentation_obj?.description}
                                <button
                                    type="button"
                                    onclick={() => {
                                        console.log('Show/Hide Description');
                                        if (
                                            $events_sess.pres_mgmt
                                                .show_content__presentation_description ==
                                            event_presentation_obj.event_presentation_id
                                        ) {
                                            $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;

                                            // Was testing with LiveQuery
                                            $events_slct.event_presentation_id =
                                                event_presentation_obj.event_presentation_id;
                                        }
                                    }}
                                    class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
                                >
                                    {#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id}
                                        <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}>{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}
                        <Comp_event_presenter_obj_li
                            link_to_type={'event_presentation'}
                            link_to_id={event_presentation_obj?.event_presentation_id}
                            event_presenter_id_random_li={[]}
                            log_lvl={2}
                        ></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}
                        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>
