<script lang="ts">
    interface Props {
        // export let data: any;
        log_lvl?: number;
        lq__event_obj: any; // let ae_tmp: key_val = {};
    }

    let { log_lvl = 0, lq__event_obj }: Props = $props();

    import { goto } from '$app/navigation';

    import type { key_val } from '$lib/stores/ae_stores';
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import { core_func } from '$lib/ae_core/ae_core_functions';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig_kv
    } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';

    import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
    import Element_data_store from '$lib/elements/element_data_store_v3.svelte';
    import Comp__events_menu_nav from '../ae_comp__events_menu_nav.svelte';
    import Comp__pres_mgmt_menu_opts from '../ae_comp__events_menu_opts.svelte';

    // Variables
    let ae_promises: key_val = {};
    let ae_tmp: key_val = $state({});
    let ae_triggers: key_val = $state({});
</script>

<!-- New standard page specific menu 2025-06-20 -->
<div class="pres_mgmt__session_search_menu ae_container_module_menu">
    <!-- BEGIN: The menu button options -->
    <div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
        <Comp__events_menu_nav
            hide={!$ae_loc.authenticated_access}
            event_id={$lq__event_obj?.event_id}
            ae_core={$ae_loc.administrator_access}
            events__locations={$ae_loc.administrator_access}
            events__reports={$ae_loc.trusted_access}
        />

        <span
            class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
        >
            <!-- Button to toggle between the regular event session search view and managing event files -->
            <button
                type="button"
                onclick={() => {
                    if ($events_loc.pres_mgmt.show_content__event_view == 'manage_files') {
                        $events_loc.pres_mgmt.show_content__event_view = null;
                    } else {
                        $events_loc.pres_mgmt.show_content__event_view = 'manage_files';
                    }
                }}
                class={ae_snip.classes__events_pres_mgmt_menu__button_special}
                class:preset-filled-primary-500={$events_loc.pres_mgmt.show_content__event_view ==
                    'manage_files'}
                class:preset-tonal-primary={$events_loc.pres_mgmt.show_content__event_view !=
                    'manage_files'}
                class:hidden={!$ae_loc.administrator_access || 1 == 1}
                disabled={!$ae_loc.manager_access}
                title="Session search or manage files for the event"
            >
                {#if $events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
                    <span class="fas fa-users m-1"></span>
                    <!-- View Session Search -->
                    Session Search?
                {:else}
                    <span class="fas fa-file-archive m-1"></span>
                    Event Files?
                    <span
                        class="badge badge-icon preset-tonal-success absolute -top-1.5 -right-1.5 z-10"
                        class:hidden={!$lq__event_obj?.file_count}
                    >
                        {$lq__event_obj?.file_count}×
                    </span>
                {/if}
            </button>

            <!-- Button to toggle between showing and not showing the extended options menu -->
            <button
                type="button"
                onclick={() => {
                    if ($events_loc.pres_mgmt.show_menu__session_search == 'options') {
                        $events_loc.pres_mgmt.show_menu__session_search = null;
                    } else {
                        $events_loc.pres_mgmt.show_menu__session_search = 'options';
                    }
                }}
                class="btn btn-sm mx-1"
                class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__session_search ==
                    'options'}
                class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session_search != 'options'}
                class:hidden={!$ae_loc.trusted_access}
                title="Options for the event session search"
            >
                <span class="fas fa-cog m-1"></span>
                {#if $events_loc.pres_mgmt.show_menu__session_search == 'options'}
                    Hide
                {:else}
                    <span class="hidden"> Show </span>
                {/if}
                Options?
            </button>

            <button
                type="button"
                onclick={() => {
                    if ($events_loc.pres_mgmt.show_menu__session_search == 'help') {
                        $events_loc.pres_mgmt.show_menu__session_search = null;
                    } else {
                        $events_loc.pres_mgmt.show_menu__session_search = 'help';
                    }
                }}
                class="btn btn-sm mx-1"
                class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__session_search == 'help'}
                class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session_search != 'help'}
                title="Help and information about the session search"
            >
                <span class="fas fa-question-circle m-1"></span>
                {#if $events_loc.pres_mgmt.show_menu__session_search == 'help'}
                    Hide Help?
                {:else}
                    Help?
                {/if}
            </button>
        </span>

        <span class="ae_menu__action_options" class:hidden={true}>
            No action options here yet.
        </span>
    </div>
    <!-- END: The menu button options -->

    <!-- BEGIN: The expanded menu area for information and options -->
    <div
        class:ae_container_module_options={$events_loc.pres_mgmt.show_menu__session_search ==
            'options'}
        class:hidden={$events_loc.pres_mgmt.show_menu__session_search != 'options'}
    >
        <div class="ae_comp__event_menu_opts w-full">
            <h2 class="text-sm font-semibold text-center pb-1">Æ Event Menu Options</h2>

            <div class="flex flex-row flex-wrap gap-1 items-center justify-between">
                <div class="flex flex-row gap-1 items-center justify-evenly relative">
                    <!-- Toggle alert status -->
                    <button
                        type="button"
                        disabled={!$ae_loc.administrator_access}
                        onclick={() => {
                            if (
                                !confirm(
                                    `Are you sure you want to toggle the alert status for this session?`
                                )
                            ) {
                                return false;
                            }

                            console.log('Toggle alert status for the session.');

                            let new_alert_value = !$lq__event_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',
                                    object_id: $lq__event_obj?.event_id,
                                    object_reload: true,
                                    field_name: 'alert',
                                    new_field_value: new_alert_value,
                                    log_lvl: 1
                                })
                                .then(function (results) {})
                                .finally(function () {});
                        }}
                        class:opacity-100={$lq__event_obj?.alert}
                        class:opacity-50={!$lq__event_obj?.alert}
                        class="
                            btn btn-sm
                            preset-tonal-warning hover:preset-tonal-error
                            preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
                            hover:opacity-100
                            transition-all
                            "
                        title={$lq__event_obj?.alert ? 'Remove alert status' : 'Mark as alert'}
                    >
                        {#if $lq__event_obj?.alert}
                            <!-- class="fas fa-exclamation-triangle" -->
                            <span
                                class="fas fa-bell-slash m-0.75 text-warning-600"
                                title="This session is marked as an alert."
                            ></span>
                        {:else}
                            <span
                                class="fas fa-bell m-0.75 text-gray-400"
                                title="This session is not marked as an alert."
                            ></span>
                        {/if}
                        <span class="hidden">Toggle Alert</span>
                    </button>
                </div>

                <div class="flex flex-row flex-wrap gap-1 items-center justify-evenly">
                    <Element_ae_crud
                        trigger_patch={ae_triggers.priority}
                        api_cfg={$ae_api}
                        object_type={'event'}
                        object_id={$lq__event_obj?.event_id}
                        field_name={'priority'}
                        field_type={'button'}
                        field_value={ae_tmp.value__priority}
                        allow_null={true}
                        hide_edit_btn={true}
                        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({
                                api_cfg: $ae_api,
                                event_id: $lq__event_obj?.event_id,
                                log_lvl: log_lvl
                            });
                        }}
                    >
                        <!-- {@html $lq__event_obj?.priority ? '<span class="fas fa-star m-1"></span> High Priority' : '<span class="far fa-star m-1"></span> Priority not set'} -->
                        <button
                            type="button"
                            disabled={!$ae_loc.administrator_access}
                            onclick={() => {
                                if (
                                    !confirm(
                                        `Are you sure you want to mark this event as ${$lq__event_obj?.priority ? 'not priority' : 'high priority'}?`
                                    )
                                ) {
                                    return false;
                                }

                                ae_tmp.value__priority = !$lq__event_obj?.priority;

                                // $events_slct.exhibit_tracking_obj.priority = !$lq__event_obj?.priority;
                                ae_triggers.priority = true;
                            }}
                            class="btn btn-sm *:hover:inline"
                            class:ae_btn_surface_outlined={!$lq__event_obj?.priority}
                            class:ae_btn_success={$lq__event_obj?.priority}
                        >
                            {#if $lq__event_obj?.priority}
                                <span class="fas fa-star m-1"></span>
                                <!-- <span class="fas fa-arrow-down m-1"></span> -->
                                <span class="hidden"> Not Priority? </span>
                            {:else}
                                <!-- <span class="fas fa-toggle-off m-1"></span> -->
                                <span class="far fa-star m-1"></span>
                                <span class="hidden"> Priority </span>
                                ?
                            {/if}
                        </button>
                    </Element_ae_crud>

                    <Element_ae_crud
                        trigger_patch={ae_triggers.hide}
                        api_cfg={$ae_api}
                        object_type={'event'}
                        object_id={$lq__event_obj?.event_id}
                        field_name={'hide'}
                        field_type={'button'}
                        field_value={ae_tmp.value__hide}
                        allow_null={false}
                        hide_edit_btn={true}
                        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({
                                api_cfg: $ae_api,
                                event_id: $lq__event_obj?.event_id,
                                log_lvl: log_lvl
                            });
                        }}
                    >
                        <!-- {($lq__event_obj?.hide ? 'Hidden' : 'Not Hidden')} -->
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                if (
                                    !confirm(
                                        `Are you sure you want to ${$lq__event_obj?.hide ? 'unhide' : 'hide'} this session?`
                                    )
                                ) {
                                    return false;
                                }

                                ae_tmp.value__hide = !$lq__event_obj?.hide;

                                ae_triggers.hide = true;
                            }}
                            class="btn btn-sm *:hover:inline"
                            class:ae_btn_success_outlined={!$lq__event_obj?.hide}
                            class:ae_btn_warning={$lq__event_obj?.hide}
                        >
                            {#if $lq__event_obj?.hide}
                                <span class="fas fa-toggle-on m-1"></span>
                                Unhide?
                            {:else}
                                <!-- <span class="fas fa-toggle-off m-1"></span> -->
                                <span class="fas fa-eye m-1"></span>
                                <span class="hidden"> Not Hidden </span>
                            {/if}
                            <!-- {@html ($lq__event_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
                        </button>
                    </Element_ae_crud>

                    <!-- Enable/Disable -->
                    <Element_ae_crud
                        trigger_patch={ae_triggers.enable}
                        api_cfg={$ae_api}
                        object_type={'event'}
                        object_id={$lq__event_obj?.event_id}
                        field_name={'enable'}
                        field_type={'button'}
                        field_value={ae_tmp.value__enable}
                        allow_null={false}
                        hide_edit_btn={true}
                        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({
                                    api_cfg: $ae_api,
                                    event_id: $lq__event_obj?.event_id,
                                    log_lvl: log_lvl
                                })
                                .then(function (load_results) {
                                    // Maybe reload page?
                                    // window.location.reload();
                                });
                        }}
                    >
                        <!-- {($lq__event_obj?.enable ? 'Enabled' : 'Disabled')} -->
                        <button
                            type="button"
                            disabled={!$ae_loc.manager_access}
                            onclick={() => {
                                if (
                                    !confirm(
                                        `Are you sure you want to ${$lq__event_obj?.enable ? 'disable' : 'enable'} this session?`
                                    )
                                ) {
                                    return false;
                                }

                                ae_tmp.value__enable = !$lq__event_obj?.enable;

                                // $events_slct.exhibit_tracking_obj.hide = !$lq__event_obj?.hide;
                                ae_triggers.enable = true;
                            }}
                            class="btn btn-sm"
                            class:ae_btn_success_outlined={$lq__event_obj?.enable}
                            class:ae_btn_error={!$lq__event_obj?.enable}
                        >
                            {#if $lq__event_obj?.enable}
                                <span class="fas fa-toggle-on m-1"></span>
                                Enabled
                            {:else}
                                <span class="fas fa-toggle-off m-1"></span>
                                Enable?
                            {/if}
                            <!-- {@html ($lq__event_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable?' : '<span class="fas fa-toggle-off m-1"></span> Enable?')} -->
                        </button>
                    </Element_ae_crud>

                    <!-- Sort -->

                    <!-- Group -->

                    {#if $ae_loc.manager_access}
                        <button
                            type="button"
                            disabled={!$ae_loc.super_access}
                            onclick={() => {
                                if (!confirm('Are you sure you want to delete this session?')) {
                                    return false;
                                }

                                events_func
                                    .delete_ae_obj_id__event({
                                        api_cfg: $ae_api,
                                        event_id: $lq__event_obj.event_id,
                                        method: 'delete'
                                    })
                                    .then(function (delete_results) {
                                        $events_slct.event_id = null;
                                        $events_slct.event_obj = {};

                                        goto(`/events`);
                                    });
                            }}
                            class="btn btn-sm mx-1 ae_btn_error"
                            title="Delete record permanently"
                        >
                            <span class="fas fa-minus-circle mx-1"></span>
                            Delete
                        </button>
                    {:else if $ae_loc.manager_access}
                        <button
                            onclick={() => {
                                if (
                                    !confirm(
                                        'Are you sure you want to remove (disable) this session? This is not common.'
                                    )
                                ) {
                                    return false;
                                }

                                events_func
                                    .delete_ae_obj_id__event({
                                        api_cfg: $ae_api,
                                        event_id: $lq__event_obj.event_id,
                                        method: 'disable'
                                    })
                                    .then(function (delete_results) {
                                        $events_slct.event_id = null;
                                        $events_slct.event_obj = {};

                                        goto(`/events`);
                                    });
                            }}
                            class="btn btn-sm mx-1 ae_btn_warning"
                            title="Disable record"
                        >
                            <span class="fas fa-minus mx-1"></span>
                            Delete
                        </button>
                    {/if}
                </div>
            </div>
        </div>

        <div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full p-1">
            <!-- Save search text option toggle button? -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.save_search_text =
                        !$events_loc.pres_mgmt.save_search_text;
                }}
                class="btn btn-sm justify-between w-full max-w-50 text-center"
                class:ae_btn_surface={$events_loc.pres_mgmt.save_search_text}
                class:ae_btn_surface_outlined={!$events_loc.pres_mgmt.save_search_text}
                title="Save the search text for this session search?"
            >
                {#if $events_loc.pres_mgmt.save_search_text}
                    <span class="fas fa-toggle-on m-1"></span>
                    <span class="grow">
                        <span class="fas fa-save m-1"></span>
                        Do Not Save Search?
                    </span>
                {:else}
                    <span class="fas fa-toggle-off m-1"></span>
                    <span class="grow">
                        <span class="fas fa-save m-1"></span>
                        Save Search Text?
                    </span>
                {/if}
            </button>

            <!-- Show/Hide launcher links (new version) -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.hide__launcher_link =
                        !$events_loc.pres_mgmt.hide__launcher_link;
                }}
                class="btn btn-sm ae_btn_surface justify-between w-full max-w-50 text-center"
            >
                <span
                    class="fas {$events_loc.pres_mgmt.hide__launcher_link
                        ? 'fa-toggle-off'
                        : 'fa-toggle-on'} m-1"
                ></span>
                <span class="grow">
                    <span class="fas fa-plane m-1"></span>
                    {$events_loc.pres_mgmt.hide__launcher_link
                        ? 'Show Launcher Links'
                        : 'Hide Launcher Links?'}
                </span>
            </button>

            <!-- Show/Hide launcher links (legacy version) -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.hide__launcher_link_legacy =
                        !$events_loc.pres_mgmt.hide__launcher_link_legacy;
                }}
                class="btn btn-sm ae_btn_surface justify-between w-full max-w-50 text-center"
            >
                <span
                    class="fas {$events_loc.pres_mgmt.hide__launcher_link_legacy
                        ? 'fa-toggle-off'
                        : 'fa-toggle-on'} m-1"
                ></span>
                <span class="grow">
                    <span class="fas fa-paper-plane m-1"></span>
                    {$events_loc.pres_mgmt.hide__launcher_link_legacy
                        ? 'Legacy Launcher Links'
                        : 'Hide Legacy Launcher?'}
                </span>
            </button>

            <!-- Show/Hide links to the location (room) -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.hide__location_link =
                        !$events_loc.pres_mgmt.hide__location_link;
                }}
                class="btn btn-sm ae_btn_surface justify-between w-full max-w-50 text-center"
            >
                <span
                    class="fas {$events_loc.pres_mgmt.hide__location_link
                        ? 'fa-toggle-off'
                        : 'fa-toggle-on'} m-1"
                ></span>
                <span class="grow">
                    <span class="fas fa-map-marker-alt m-1"></span>
                    {$events_loc.pres_mgmt.hide__location_link
                        ? 'Show Location Links'
                        : 'Hide Location Links?'}
                </span>
            </button>

            <!-- Show/Hide the Location (room) column in tables and lists -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.hide__session_li_location_field =
                        !$events_loc.pres_mgmt.hide__session_li_location_field;
                }}
                class="btn btn-sm ae_btn_surface justify-between w-full max-w-50 text-center"
                title="Toggle showing the Location column in session lists and tables"
            >
                <span
                    class="fas {$events_loc.pres_mgmt.hide__session_li_location_field
                        ? 'fa-toggle-off'
                        : 'fa-toggle-on'} m-1"
                ></span>
                <span class="grow">
                    <!-- <span class="fas fa-door-open m-1"></span> -->
                    {$events_loc.pres_mgmt.hide__session_li_location_field
                        ? 'Show Location Column'
                        : 'Hide Location Column?'}
                </span>
            </button>

            <!-- Show/Hide the POC column in tables and lists -->
            <button
                type="button"
                onclick={() => {
                    $events_loc.pres_mgmt.hide__session_li_poc_field =
                        !$events_loc.pres_mgmt.hide__session_li_poc_field;
                }}
                class="btn btn-sm ae_btn_surface justify-between w-full max-w-50 text-center"
                title="Toggle showing the POC column in session lists and tables"
            >
                <span
                    class="fas {$events_loc.pres_mgmt.hide__session_li_poc_field
                        ? 'fa-toggle-off'
                        : 'fa-toggle-on'} m-1"
                ></span>
                <span class="grow">
                    <!-- <span class="fas fa-user-tie m-1"></span> -->
                    {$events_loc.pres_mgmt.hide__session_li_poc_field
                        ? 'Show POC Column'
                        : 'Hide POC Column?'}
                </span>
            </button>
        </div>

        <Comp__pres_mgmt_menu_opts hide={!$ae_loc.authenticated_access} />
    </div>
    <!-- END: The expanded menu area for information and options -->

    <Element_data_store
        ds_code="events__pres_mgmt__session_search_help"
        ds_name="Default: Events - Pres Mgmt Session Search Help"
        ds_type="html"
        for_type="event"
        for_id={$events_slct.event_id}
        class_li="ae_container_module_help"
        show_edit={false}
        show_edit_btn={true}
        hide={$events_loc.pres_mgmt.show_menu__session_search != 'help'}
    />

    <div>
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.show_menu__session_search =
                    !$events_loc.pres_mgmt.show_menu__session_search;
            }}
            class="btn btn-sm mx-1 ae_btn_info_filled"
            class:hidden={!$events_loc.pres_mgmt.show_menu__session_search}
            title="Collapse the expanded menu"
        >
            <span class="fas fa-chevron-up m-1"></span>
            {#if $events_loc.pres_mgmt.show_menu__session_search}
                Hide
                <!-- Collapse -->
            {:else}
                Show
            {/if}
            <!-- Menu? -->
        </button>
    </div>
</div>
<!-- End of the new standard page specific menu -->
