<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 { ae_util } from '$lib/ae_utils/ae_utils';
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/ae_events_functions';
import {
    events_sess,
    events_slct,
    events_trigger,
    events_trig_kv
} from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
import { events_auth_loc } from '$lib/stores/ae_events_stores__auth.svelte';
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.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';
import {
    Barcode,
    CalendarDays,
    Eye,
    EyeOff,
    ListOrdered,
    Plus
} from '@lucide/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 container w-full min-w-full space-y-2 overflow-x-auto px-0.5 py-2 {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_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">
                <Plus size="1em" class="" />
                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="preset-filled-surface-300-700 rounded-lg px-4 text-xl font-bold"
                    title="Count {lq__event_presentation_obj_li.length ??
                        'None'}">
                    <ListOrdered size=".9em" class="text-surface-800-200" />
                    {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 -->
    <ul class="space-y-4">
        {#each lq__event_presentation_obj_li ?? [] as event_presentation_obj (event_presentation_obj.event_presentation_id)}
            <li
                class="border-surface-200-800 bg-surface-50-900 space-y-3 rounded-xl border p-4 shadow-sm transition-colors duration-200">
                <div class="space-2 float-right 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_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">
                            <Plus size="1em" class="" />
                            Add Presenter
                        </button>
                    {/if}
                </div>

                <h4
                    class="bg-surface-100-900 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2 text-lg font-bold">
                    <span
                        class:hidden={!event_presentation_obj.start_datetime ||
                            pres_mgmt_loc.current.hide__presentation_datetime}
                        class="border-r-2 border-gray-800/50 px-1 text-base">
                        {ae_util.iso_datetime_formatter(
                            event_presentation_obj.start_datetime,
                            'dddd'
                        )}
                        @
                        {ae_util.iso_datetime_formatter(
                            event_presentation_obj.start_datetime,
                            'time_short',
                            pres_mgmt_loc.current.use_12h
                        )}
                    </span>

                    <Element_ae_obj_field_editor
                        object_type={'event_presentation'}
                        object_id={event_presentation_obj?.event_presentation_id}
                        field_name={'name'}
                        field_type={'text'}
                        current_value={event_presentation_obj?.name}
                        display_block={true}
                        on_success={() =>
                            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="italic">
                            {event_presentation_obj?.name}
                        </span>
                    </Element_ae_obj_field_editor>
                    <!-- "{event_presentation_obj.name}" -->

                    <Element_ae_obj_field_editor
                        object_type={'event_presentation'}
                        object_id={event_presentation_obj?.event_presentation_id}
                        field_name={'code'}
                        field_type={'text'}
                        current_value={event_presentation_obj?.code}
                        display_block={true}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_presentation({
                                api_cfg: $ae_api,
                                event_presentation_id:
                                    event_presentation_obj.event_presentation_id,
                                log_lvl: 1
                            })}>
                        {#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !pres_mgmt_loc.current.hide__presentation_code}
                            <span
                                class="preset-tonal-warning rounded-md px-2 py-0.5 text-xs leading-none"
                                title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}">
                                <Barcode size="1em" />
                                {event_presentation_obj?.code ?? ''}
                                {event_presentation_obj?.abstract_code ?? ''}
                            </span>
                        {:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
                            <span
                                class="text-semibold text-success-800-400 text-sm">
                                <Barcode size="1em" />
                                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_obj_field_editor>
                    <!-- 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-semibold text-success-800-400 text-sm">
                        Date &
                        <button
                            type="button"
                            onclick={() => {
                                pres_mgmt_loc.current.use_12h = !pres_mgmt_loc.current.use_12h;
                            }}>
                            time
                        </button>
                        :</span>
                    <CalendarDays size="1em" class="text-success-800-400" />
                    <Element_ae_obj_field_editor
                        object_type={'event_presentation'}
                        object_id={event_presentation_obj?.event_presentation_id}
                        field_name={'start_datetime'}
                        field_type={'datetime'}
                        current_value={event_presentation_obj.start_datetime}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_presentation({
                                api_cfg: $ae_api,
                                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,
                            'time_short',
                            pres_mgmt_loc.current.use_12h
                        )}
                    </Element_ae_obj_field_editor>
                    -
                    <Element_ae_obj_field_editor
                        object_type={'event_presentation'}
                        object_id={event_presentation_obj?.event_presentation_id}
                        field_name={'end_datetime'}
                        field_type={'datetime'}
                        current_value={event_presentation_obj.end_datetime}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_presentation({
                                api_cfg: $ae_api,
                                event_presentation_id:
                                    event_presentation_obj?.event_presentation_id
                            })}>
                        {ae_util.iso_datetime_formatter(
                            event_presentation_obj.end_datetime,
                            'time_short',
                            pres_mgmt_loc.current.use_12h
                        )}
                    </Element_ae_obj_field_editor>
                </div>

                <div
                    class:hidden={!pres_mgmt_loc.current.show_content__presentation_description &&
                        !($ae_loc.trusted_access && $ae_loc.edit_mode)}>
                    <Element_ae_obj_field_editor
                        object_type={'event_presentation'}
                        object_id={event_presentation_obj?.event_presentation_id}
                        field_name={'description'}
                        field_type={'textarea'}
                        current_value={event_presentation_obj?.description}
                        allow_null={true}
                        display_block={true}
                        textarea_rows={15}
                        on_success={() =>
                            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-semibold text-success-800-400 text-sm">
                            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}
                                    <EyeOff size="1em" class="" />
                                    <span>Hide Description</span>
                                {:else}
                                    <Eye size="1em" class="" />
                                    <span>Show</span>
                                {/if}
                            </button>

                            <pre
                                class="bg-surface-100-900 rounded-lg p-3 text-sm whitespace-pre-wrap"
                                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_obj_field_editor>
                </div>

                <!-- Show presenters for this presentation -->
                <Comp_event_presenter_obj_li
                    link_to_type={'event_presentation'}
                    link_to_id={event_presentation_obj.event_presentation_id}
                    event_presenter_id_li={[]}
                    log_lvl={2}></Comp_event_presenter_obj_li>

                <!-- 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_auth_loc.current.auth__kv.session[
                        $events_slct.event_session_id
                    ] ||
                        events_auth_loc.current.auth__kv.presenter[
                            $events_slct.event_presenter_id
                        ]}
                    allow_moderator={events_auth_loc.current.auth__kv.session[
                        $events_slct.event_session_id
                    ]}
                    container_class_li={''} />
            </li>
        {/each}
    </ul>
</section>
