<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 {
        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';
    import { events_func } from '$lib/ae_events_functions';

    import { api } from '$lib/api/api';
    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';
</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}
            events__settings={$ae_loc.edit_mode && $ae_loc.administrator_access}
            events__session_search={false}
        />

        <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}
                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={async () => {
                            if (
                                !confirm(
                                    `Are you sure you want to toggle the alert status for this session?`
                                )
                            ) {
                                return false;
                            }

                            await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event', obj_id: $lq__event_obj?.event_id, fields: { alert: !$lq__event_obj?.alert } });
                            events_func.load_ae_obj_id__event({ api_cfg: $ae_api, event_id: $lq__event_obj?.event_id, log_lvl });
                        }}
                        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"
                >
                    <button
                        type="button"
                        disabled={!$ae_loc.administrator_access}
                        onclick={async () => {
                            if (
                                !confirm(
                                    `Are you sure you want to mark this event as ${$lq__event_obj?.priority ? 'not priority' : 'high priority'}?`
                                )
                            ) {
                                return false;
                            }
                            await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event', obj_id: $lq__event_obj?.event_id, fields: { priority: !$lq__event_obj?.priority } });
                            events_func.load_ae_obj_id__event({ api_cfg: $ae_api, event_id: $lq__event_obj?.event_id, log_lvl });
                        }}
                        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="hidden"> Not Priority? </span>
                        {:else}
                            <span class="far fa-star m-1"></span>
                            <span class="hidden"> Priority </span>
                            ?
                        {/if}
                    </button>

                    <button
                        type="button"
                        disabled={!$ae_loc.manager_access}
                        onclick={async () => {
                            if (
                                !confirm(
                                    `Are you sure you want to ${$lq__event_obj?.hide ? 'unhide' : 'hide'} this session?`
                                )
                            ) {
                                return false;
                            }
                            await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event', obj_id: $lq__event_obj?.event_id, fields: { hide: !$lq__event_obj?.hide } });
                            events_func.load_ae_obj_id__event({ api_cfg: $ae_api, event_id: $lq__event_obj?.event_id, log_lvl });
                        }}
                        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-eye m-1"></span>
                            <span class="hidden"> Not Hidden </span>
                        {/if}
                    </button>

                    <!-- Enable/Disable -->
                    <button
                        type="button"
                        disabled={!$ae_loc.manager_access}
                        onclick={async () => {
                            if (
                                !confirm(
                                    `Are you sure you want to ${$lq__event_obj?.enable ? 'disable' : 'enable'} this session?`
                                )
                            ) {
                                return false;
                            }
                            await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event', obj_id: $lq__event_obj?.event_id, fields: { enable: !$lq__event_obj?.enable } });
                            events_func.load_ae_obj_id__event({ api_cfg: $ae_api, event_id: $lq__event_obj?.event_id, log_lvl });
                        }}
                        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}
                    </button>

                    <!-- 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
                            type="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 -->
