<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 type { key_val } from '$lib/stores/ae_stores';
    import { core_func } from '$lib/ae_core/ae_core_functions';

    // *** Import Aether specific variables and functions
    // import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig_kv
    } from '$lib/stores/ae_events_stores';

    // Variables
    let ae_promises: key_val = {};
    let ae_tmp: key_val = $state({});
    let ae_triggers: key_val = $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="
        absolute left-0
        flex flex-row items-center justify-center
        text-warning-600
        z-10
        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
            text-sm
            px-3 sm:px-2
            preset-tonal-warning
            preset-outlined-warning-100-900
            opacity-80 hover:opacity-100
            transition-all
            group
            "
            title={`*Alert*:\n${event_session_obj?.alert_msg ? event_session_obj?.alert_msg : 'No message set.'}`}
        >
            <span class="fas fa-bell text-warning-600 mx-1"></span>
            <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="
            min-w-xs
            max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
            p-1 px-2
            bg-warning-100 text-warning-900
            border border-warning-300
            rounded-lg
            shadow-lg
            transition-all
            "
        >
            <div
                class="flex flex-row flex-wrap gap-1 items-center justify-between mb-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
                text-xs
                px-1
                preset-tonal-warning hover:preset-tonal-error
                preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
                opacity-80 hover:opacity-100
                transition-all
                group

                "
                    title="Cancel editing and close alert message"
                >
                    <span class="fas fa-times mx-1"></span>
                    <!-- <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;
                        }

                        let new_alert_value = !event_session_obj?.alert;
                        console.log('New alert value:', new_alert_value);

                        ae_promises.api_update__ae_obj = core_func
                            .update_ae_obj_id_crud_v2({
                                api_cfg: $ae_api,
                                object_type: 'event_session',
                                object_id: event_session_obj?.event_session_id,
                                object_reload: true,
                                field_name: 'alert',
                                new_field_value: new_alert_value,
                                log_lvl: 1
                            })
                            .then(function (results) {}) // eslint-disable-line
                            .finally(function () {});
                    }}
                    class="
                btn btn-sm
                text-xs
                px-1
                preset-tonal-secondary hover:preset-filled-secondary-500
                preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                opacity-80 hover:opacity-100
                transition-all
                "
                    title="Toggle alert status"
                >
                    <!-- <span class="fas fa-exclamation-triangle text-warning-600 mr-1" title="This session is marked as an alert."></span> -->
                    <span
                        class="fas fa-bell-slash text-warning-600 mr-1"
                        title="This session has an alert set."
                    ></span>
                    <span>Remove Alert</span>
                </button>
            </div>

            <div class="preset-tonal-surface p-1 min-h-16 min-w-xs">
                {#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="flex flex-row flex-wrap gap-1 items-center justify-between mt-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 = core_func
                                .update_ae_obj_id_crud_v2({
                                    api_cfg: $ae_api,
                                    object_type: 'event_session',
                                    object_id:
                                        event_session_obj?.event_session_id,
                                    object_reload: true,
                                    field_name: 'alert_msg',
                                    new_field_value:
                                        $events_sess.pres_mgmt.tmp__alert_msg[
                                            event_session_obj?.event_session_id
                                        ],
                                    log_lvl: 1
                                })
                                .then(function (results) {}) // eslint-disable-line
                                .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
                    text-xs
                    px-1
                    preset-tonal-success hover:preset-filled-success-500
                    preset-outlined-success-100-900 hover:preset-outlined-success-600-400
                    opacity-80 hover:opacity-100
                    transition-all
                    "
                        title="Save alert message"
                    >
                        <span class="fas fa-save mx-1"></span>
                        <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
                    text-xs
                    px-1
                    preset-tonal-secondary hover:preset-filled-secondary-500
                    preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                    opacity-80 hover:opacity-100
                    transition-all

                    "
                        title="Reset alert message and cancel editing alert"
                    >
                        <span class="fas fa-times mx-1"></span>
                        <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
                    text-xs
                    px-1
                    preset-tonal-secondary hover:preset-tonal-error
                    preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
                    opacity-80 hover:opacity-100
                    transition-all
                    "
                        title="Edit alert message"
                    >
                        <span class="fas fa-edit mx-1"></span>
                        <span>Edit Message</span>
                    </button>
                {/if}
            </div>
        </div>
    </div>
{/if}
