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

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

    // import type { key_val } from '$lib/ae_stores';
    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 Element_data_store from '$lib/elements/element_data_store_v3.svelte';
    import Comp__events_menu_nav from '../../../ae_comp__events_menu_nav.svelte';

    // let ae_tmp: key_val = {};
    // let ae_triggers: key_val = {};
</script>

<!-- New standard page specific menu 2025-06-20 -->
<div class="pres_mgmt__location_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__reports={$ae_loc.trusted_access}
            events__session_search={$events_slct.event_id}
        />

        <span
            class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
        >
            <!-- Button to toggle between showing and not showing the extended options menu -->
            <button
                type="button"
                onclick={() => {
                    if (
                        $events_loc.pres_mgmt.show_menu__location == 'options'
                    ) {
                        $events_loc.pres_mgmt.show_menu__location = null;
                    } else {
                        $events_loc.pres_mgmt.show_menu__location = 'options';
                    }
                }}
                class="btn btn-sm mx-1"
                class:ae_btn_info_filled={$events_loc.pres_mgmt
                    .show_menu__location == 'options'}
                class:ae_btn_info={$events_loc.pres_mgmt.show_menu__location !=
                    'options'}
                class:hidden={!$ae_loc.trusted_access}
                title="Options for the event locations"
            >
                <span class="fas fa-cog m-1"></span>
                {#if $events_loc.pres_mgmt.show_menu__location == 'options'}
                    Hide
                {:else}
                    Show
                {/if}
                Options?
            </button>

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

    <!-- BEGIN: The expanded menu area for information and options -->
    <div
        class="flex flex-row flex-wrap gap-0.5 items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
        class:hidden={$events_loc.pres_mgmt.show_menu__location != 'options'}
    >
        <!-- <div
            class="flex flex-row flex-wrap gap-1 items-center justify-center w-full"
            > -->
        <!-- Show the session list or device list -->
        <button
            type="button"
            onclick={() => {
                if (
                    $events_loc.pres_mgmt
                        .show_content__location_devices_sessions == 'sessions'
                ) {
                    $events_loc.pres_mgmt.show_content__location_devices_sessions =
                        'devices';
                } else {
                    $events_loc.pres_mgmt.show_content__location_devices_sessions =
                        'sessions';
                }
            }}
            class="btn btn-sm"
            class:ae_btn_surface={$events_loc.pres_mgmt
                ?.show_content__location_devices_sessions == 'sessions'}
            class:ae_btn_surface_outlined={$events_loc.pres_mgmt
                ?.show_content__location_devices_sessions == 'devices'}
            title="Show the session list or device list for each location."
        >
            {#if $events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions'}
                <span class="fas fa-toggle-on m-1"></span>
                Location's Session List
            {:else}
                <span class="fas fa-toggle-off m-1"></span>
                Location's Device List
            {/if}
        </button>

        <!-- Show or hide the device code -->
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.hide__device_code =
                    !$events_loc.pres_mgmt.hide__device_code;
            }}
            class="btn btn-sm"
            class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__device_code}
            class:ae_btn_surface_outlined={$events_loc.pres_mgmt
                ?.hide__device_code}
            title="Show or hide the device code."
        >
            {#if !$events_loc.pres_mgmt.hide__device_code}
                <span class="fas fa-toggle-on m-1"></span>
                Device Code
            {:else}
                <span class="fas fa-toggle-off m-1"></span>
                Device Code
            {/if}
        </button>

        <!-- Show or hide the location code -->
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.hide__location_code =
                    !$events_loc.pres_mgmt.hide__location_code;
            }}
            class="btn btn-sm"
            class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__location_code}
            class:ae_btn_surface_outlined={$events_loc.pres_mgmt
                ?.hide__location_code}
            title="Show or hide the location code."
        >
            {#if !$events_loc.pres_mgmt.hide__location_code}
                <span class="fas fa-toggle-on m-1"></span>
                Showing Location Code
            {:else}
                <span class="fas fa-toggle-off m-1"></span>
                Show Location Code?
            {/if}
        </button>

        <!-- Show or hide the session code -->
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.hide__session_code =
                    !$events_loc.pres_mgmt.hide__session_code;
            }}
            class="btn btn-sm"
            class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__session_code}
            class:ae_btn_surface_outlined={$events_loc.pres_mgmt
                ?.hide__session_code}
            title="Show or hide the session code."
        >
            {#if !$events_loc.pres_mgmt.hide__session_code}
                <span class="fas fa-toggle-on m-1"></span>
                Showing Session Code
            {:else}
                <span class="fas fa-toggle-off m-1"></span>
                Show Session Code?
            {/if}
        </button>
        <!-- </div> -->
    </div>
    <!-- END: The expanded menu area for information and options -->

    <Element_data_store
        ds_code="events__pres_mgmt__location_help"
        ds_name="Default: Events - Pres Mgmt Session Help"
        ds_type="html"
        for_type="event"
        for_id={$lq__event_obj?.event_id}
        class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md max-w-xl"
        show_edit={false}
        show_edit_btn={true}
        hide={$events_loc.pres_mgmt.show_menu__location != 'help'}
    />

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