<script lang="ts">
interface Props {
    log_lvl?: number;

    event_session_obj: any;
    alert_status?: boolean;
    alert_msg?: string;

    new_alert_value?: null | boolean;
    new_alert_msg_value?: null | string;

    tmp__alert_msg?: null | string;

    show__edit_alert_msg?: boolean;
    show__view_alert?: boolean;

    position?: 'top' | 'bottom'; // 'top' | 'bottom'
}

let {
    log_lvl = 0,

    event_session_obj,

    new_alert_value = $bindable(null),
    new_alert_msg_value = $bindable(null),

    tmp__alert_msg = $bindable(null),

    show__edit_alert_msg = $bindable(false),
    show__view_alert = $bindable(false),

    position = 'bottom' // 'top' | 'bottom'
}: Props = $props();

// *** Import Svelte specific

import { api } from '$lib/ae_api/api';
import { events_func } from '$lib/ae_events/ae_events_functions';

// *** Import Aether specific variables and functions
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    events_sess,
    events_slct,
    events_trigger,
    events_trig_kv
} from '$lib/stores/ae_events_stores';
import { Bell, BellOff, Pencil, Save, X } from '@lucide/svelte';
// Variables — tracking in-flight promises for the template {#await} blocks
let ae_promises: { api_update__ae_obj?: Promise<any> } = $state({});
</script>

{#if event_session_obj}
    <div
        class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[
            event_session_obj?.event_session_id
        ]}
        class:bottom-0={position == 'bottom'}
        class:top-0={position == 'top'}
        class="
        text-warning-600 absolute
        left-0 z-10 flex flex-row
        items-center
        justify-center
        transition-all
        "
        title="This session is marked as an alert.">
        <!-- Toggle show/hide alert status and message -->
        <button
            type="button"
            onclick={() => {
                $events_sess.pres_mgmt.show__view_alert[
                    event_session_obj?.event_session_id
                ] =
                    !$events_sess.pres_mgmt.show__view_alert[
                        event_session_obj?.event_session_id
                    ];
            }}
            class:hidden={$events_sess.pres_mgmt.show__view_alert[
                event_session_obj?.event_session_id
            ]}
            class="
            btn btn-lg
            preset-tonal-warning
            preset-outlined-warning-100-900 group
            px-3
            text-sm
            opacity-80 transition-all
            hover:opacity-100
            sm:px-2
            "
            title={`*Alert*:\n${event_session_obj?.alert_msg ? event_session_obj?.alert_msg : 'No message set.'}`}>
            <Bell size="1em" class="text-warning-600 mx-1" />
            <span class="hidden group-hover:inline">View Alert</span>
        </button>

        <!-- Alert Message -->
        <div
            class:hidden={!$events_sess?.pres_mgmt?.show__view_alert[
                event_session_obj?.event_session_id
            ]}
            class:inline-block={event_session_obj?.alert_msg &&
                $events_sess?.pres_mgmt?.show__view_alert[
                    event_session_obj?.event_session_id
                ]}
            class="
            bg-warning-100
            text-warning-900 border-warning-300 max-w-xs min-w-xs rounded-lg
            border p-1
            px-2 shadow-lg
            transition-all sm:max-w-sm
            md:max-w-md
            lg:max-w-lg
            xl:max-w-xl
            ">
            <div
                class="mb-1 flex flex-row flex-wrap items-center justify-between gap-1">
                <!-- Toggle show/hide alert status and message -->
                <button
                    type="button"
                    onclick={() => {
                        $events_sess.pres_mgmt.tmp__alert_msg[
                            event_session_obj?.event_session_id
                        ] = event_session_obj?.alert_msg;
                        $events_sess.pres_mgmt.show__edit_alert_msg[
                            event_session_obj?.event_session_id
                        ] = false;

                        $events_sess.pres_mgmt.show__view_alert[
                            event_session_obj?.event_session_id
                        ] = false;
                    }}
                    class:hidden={!$events_sess.pres_mgmt.show__view_alert[
                        event_session_obj?.event_session_id
                    ]}
                    class="
                btn btn-sm
                preset-tonal-warning
                hover:preset-tonal-error
                preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
                group px-1
                text-xs opacity-80
                transition-all
                hover:opacity-100

                "
                    title="Cancel editing and close alert message">
                    <X size="1em" class="mx-1" />
                    <!-- <span class="hidden group-hover:inline">Close</span> -->
                    Close Alert
                </button>

                <!-- Remove alert status (and message?) -->
                <button
                    type="button"
                    onclick={() => {
                        if (
                            !confirm(
                                'Are you sure you want to remove the alert status for this session?'
                            )
                        ) {
                            return;
                        }

                        ae_promises.api_update__ae_obj = api
                            .update_ae_obj({
                                api_cfg: $ae_api,
                                obj_type: 'event_session',
                                obj_id: event_session_obj?.event_session_id,
                                fields: { alert: !event_session_obj?.alert }
                            })
                            .then(() =>
                                events_func.load_ae_obj_id__event_session({
                                    api_cfg: $ae_api,
                                    event_session_id:
                                        event_session_obj?.event_session_id,
                                    log_lvl
                                })
                            );
                    }}
                    class="
                btn btn-sm
                preset-tonal-secondary
                hover:preset-filled-secondary-500
                preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                px-1 text-xs
                opacity-80 transition-all
                hover:opacity-100
                "
                    title="Toggle alert status">
                    <!-- <span class="fas fa-exclamation-triangle text-warning-600 mr-1" title="This session is marked as an alert."></span> -->
                    <BellOff size="1em" class="text-warning-600 mr-1" />
                    <span>Remove Alert</span>
                </button>
            </div>

            <div class="preset-tonal-surface min-h-16 min-w-xs p-1">
                {#if $events_sess.pres_mgmt.show__edit_alert_msg[event_session_obj?.event_session_id]}
                    <textarea
                        bind:value={
                            $events_sess.pres_mgmt.tmp__alert_msg[
                                event_session_obj?.event_session_id
                            ]
                        }
                        rows={3}
                        class="w-full p-1"
                        placeholder="Enter alert message here..."></textarea>
                {:else}
                    {event_session_obj?.alert_msg ?? 'No message set.'}
                {/if}
            </div>

            <div
                class="mt-1 flex flex-row flex-wrap items-center justify-between gap-1">
                {#if $events_sess.pres_mgmt.show__edit_alert_msg[event_session_obj?.event_session_id]}
                    <!-- Save alert message; only show if changed -->
                    <button
                        type="button"
                        onclick={() => {
                            ae_promises.api_update__ae_obj = api
                                .update_ae_obj({
                                    api_cfg: $ae_api,
                                    obj_type: 'event_session',
                                    obj_id: event_session_obj?.event_session_id,
                                    fields: {
                                        alert_msg:
                                            $events_sess.pres_mgmt
                                                .tmp__alert_msg[
                                                event_session_obj
                                                    ?.event_session_id
                                            ]
                                    }
                                })
                                .then(() =>
                                    events_func.load_ae_obj_id__event_session({
                                        api_cfg: $ae_api,
                                        event_session_id:
                                            event_session_obj?.event_session_id,
                                        log_lvl
                                    })
                                )
                                .finally(function () {
                                    $events_sess.pres_mgmt.show__edit_alert_msg[
                                        event_session_obj?.event_session_id
                                    ] = false;
                                });
                        }}
                        class:invisible={$events_sess.pres_mgmt.tmp__alert_msg[
                            event_session_obj?.event_session_id
                        ] == event_session_obj?.alert_msg}
                        class:visible={$events_sess.pres_mgmt.tmp__alert_msg[
                            event_session_obj?.event_session_id
                        ] != event_session_obj?.alert_msg}
                        class="
                    btn btn-sm
                    preset-tonal-success
                    hover:preset-filled-success-500
                    preset-outlined-success-100-900 hover:preset-outlined-success-600-400
                    px-1 text-xs
                    opacity-80 transition-all
                    hover:opacity-100
                    "
                        title="Save alert message">
                        <Save size="1em" class="mx-1" />
                        <span>Save</span>
                    </button>

                    <!-- Cancel edit/save alert message -->
                    <button
                        type="button"
                        onclick={() => {
                            $events_sess.pres_mgmt.tmp__alert_msg[
                                event_session_obj?.event_session_id
                            ] = event_session_obj?.alert_msg;
                            $events_sess.pres_mgmt.show__edit_alert_msg[
                                event_session_obj?.event_session_id
                            ] = false;

                            $events_sess.pres_mgmt.show__view_alert[
                                event_session_obj?.event_session_id
                            ] = false;

                            // Reload the session to get the original alert message back.
                            // events_func.load_ae_obj_id__event_session({
                            //         api_cfg: $ae_api,
                            //         event_session_id: event_session_obj?.event_session_id,
                            //         log_lvl: log_lvl
                            //         })
                            // .then(function (load_results) {
                            //     console.log(`Loaded session:`, load_results);
                            // });
                        }}
                        class="
                    btn btn-sm
                    preset-tonal-secondary
                    hover:preset-filled-secondary-500
                    preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                    px-1 text-xs
                    opacity-80 transition-all
                    hover:opacity-100

                    "
                        title="Reset alert message and cancel editing alert">
                        <X size="1em" class="mx-1" />
                        <span>Cancel</span>
                    </button>
                {:else}
                    <!-- Edit alert message -->
                    <button
                        type="button"
                        onclick={() => {
                            console.log(
                                'Edit the alert message for the session.'
                            );
                            $events_sess.pres_mgmt.show__edit_alert_msg[
                                event_session_obj?.event_session_id
                            ] = true;

                            $events_sess.pres_mgmt.tmp__alert_msg[
                                event_session_obj?.event_session_id
                            ] = event_session_obj?.alert_msg;
                        }}
                        class="
                    btn btn-sm
                    preset-tonal-secondary
                    hover:preset-tonal-error
                    preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                    px-1 text-xs
                    opacity-80 transition-all
                    hover:opacity-100
                    "
                        title="Edit alert message">
                        <Pencil size="1em" class="mx-1" />
                        <span>Edit Message</span>
                    </button>
                {/if}
            </div>
        </div>
    </div>
{/if}
