<script lang="ts">
export let data: any;

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

// import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Element_data_store from '$lib/element_data_store.svelte';
// import Sign_in_out from './sign_in_out.svelte';

export let lq__event_obj: any;

let ae_tmp: key_val = {};
let ae_triggers: key_val = {};

</script>


<!-- New standard page specific menu 2024-08-01 -->
<div
    class="pres_mgmt__session_search {ae_snip.classes__events_pres_mgmt_menu}"
    class:border-gray-100={!$events_loc.pres_mgmt.show_menu__session_search}
    >

    <!-- BEGIN: The menu button options -->
    <div
        class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">

    <span
        class="ae_menu__navigation_options flex flex-row items-center justify-around"
        class:hidden={!$ae_loc.trusted_access}
        >
        <a
            href="/core"
            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
            class:hidden={!$ae_loc.administrator_access}
            >
            <span class="fas fa-cogs m-1"></span>
            &AElig; Core
        </a>

        <a
            href="/events_pres_mgmt/event/{$lq__event_obj?.event_id_random}/reports"
            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
            class:hidden={!$ae_loc.trusted_access}
            >
            <span class="fas fa-chart-line m-1"></span>
            Pres Mgmt Reports
        </a>
    </span>

    <span
        class="ae_menu__object_options flex flex-row items-center justify-around"
        >
        <!-- Button to toggle between showing and not showing the extended options menu -->
        <button
            type="button"
            on:click={() => {
                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="{ae_snip.classes__events_pres_mgmt_menu__button}"
            class:hidden={!$ae_loc.trusted_access}
            title="Options for the presenter"
            >
            <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"
            on:click={() => {
                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="{ae_snip.classes__events_pres_mgmt_menu__button}"
            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="flex flex-row flex-wrap gap-1 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__session_search != 'options'}
        >

        <div
            class="flex flex-col gap-1"
            >
            <!-- Save search text option toggle button? -->
            <button
                type="button"
                on:click={() => {
                    $events_loc.pres_mgmt.save_search_text = !$events_loc.pres_mgmt.save_search_text;
                }}
                class="btn btn-sm"
                class:variant-ghost-success={$events_loc.pres_mgmt.save_search_text}
                class:variant-ghost-warning={!$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>
                    Save Search Text
                {:else}
                    <span class="fas fa-toggle-off m-1"></span>
                    <!-- <span class="fas fa-save m-1"></span> -->
                    Save Search Text?
                {/if}
            </button>
        </div>

        {#if $ae_loc.authenticated_access}
            <div
                class="flex flex-col gap-1 items-end justify-center"
                >
            <!-- Max presenters select options -->
            <span
                class="flex flex-row gap-1 items-center justify-around"
                >
                <label
                    class="text-sm w-32 text-right"
                    for="qry_limit__presenters">
                    Max presenters:
                </label>
                <select
                    id="qry_limit__presenters"
                    bind:value={$events_sess.pres_mgmt.qry_limit__presenters}
                    on:change={() => {
                        // search__event_presenter({
                        //     api_cfg: $ae_api,
                        //     event_id: $events_slct.event_id,
                        //     agree: true,
                        //     biography: null,
                        //     ft_search_str: '',
                        //     lk_search_str: '',
                        //     params: {
                        //         'qry__enabled': 'enabled',
                        //         'qry__hidden': 'not_hidden',
                        //         'qry__limit': $events_sess.pres_mgmt.qry_limit__presenters,},
                        //     try_cache: false,
                        //     log_lvl: log_lvl,
                        // });
                    }}
                    class="select w-20 text-sm"
                    >
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value={75}>75</option>
                    <option value={100}>100</option>
                    <option value={200}>200</option>
                    <option value={500}>500</option>
                </select>
            </span>

            <!-- Max sessions select options -->
            <span
                class="flex flex-row gap-1 items-center justify-around"
                >
                <label
                    class="text-sm w-32 text-right"
                    for="qry_limit__sessions">
                    Max sessions:
                </label>
                <select
                    id="qry_limit__sessions"
                    bind:value={$events_loc.pres_mgmt.qry_limit__sessions}
                    on:change={() => {
                        // search__event_presenter({
                        //     api_cfg: $ae_api,
                        //     event_id: $events_slct.event_id,
                        //     agree: true,
                        //     biography: null,
                        //     ft_search_str: '',
                        //     lk_search_str: '',
                        //     params: {
                        //         'qry__enabled': 'enabled',
                        //         'qry__hidden': 'not_hidden',
                        //         'qry__limit': $events_loc.pres_mgmt.qry_limit__sessions,},
                        //     try_cache: false,
                        //     log_lvl: log_lvl,
                        // });
                    }}
                    class="select w-20 text-sm"
                    >
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value={75}>75</option>
                    <option value={100}>100</option>
                    <option value={200}>200</option>
                    <option value={500}>500</option>
                </select>
            </span>

            <!-- Max files select options -->
            <span
                class="flex flex-row gap-1 items-center justify-around"
                >
                <label
                    class="text-sm w-32 text-right"
                    for="qry_limit__files">
                    Max files:
                </label>
                <select
                    id="qry_limit__files"
                    bind:value={$events_sess.pres_mgmt.qry_limit__files}
                    on:change={() => {
                        // search__event_presenter({
                        //     api_cfg: $ae_api,
                        //     event_id: $events_slct.event_id,
                        //     agree: true,
                        //     biography: null,
                        //     ft_search_str: '',
                        //     lk_search_str: '',
                        //     params: {
                        //         'qry__enabled': 'enabled',
                        //         'qry__hidden': 'not_hidden',
                        //         'qry__limit': $events_loc.pres_mgmt.qry_limit__sessions,},
                        //     try_cache: false,
                        //     log_lvl: log_lvl,
                        // });
                    }}
                    class="select w-20 text-sm"
                    >
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value={75}>75</option>
                    <option value={100}>100</option>
                    <option value={200}>200</option>
                    <option value={500}>500</option>
                </select>
            </span>
            </div>
        {/if}

        {#if $ae_loc.authenticated_access}
            <div class="flex flex-col gap-1 items-center">
            <!-- Button to toggle between the showing hidden sessions -->
            {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
                <button
                    type="button"
                    on:click={() => {
                        if ($events_loc.pres_mgmt.qry_hidden == 'all') {
                            $events_loc.pres_mgmt.qry_hidden = 'not_hidden';
                        } else {
                            $events_loc.pres_mgmt.qry_hidden = 'all';
                        }
                    }}
                    class="btn btn-sm variant-ghost-success"
                    title="Hide sessions marked as hidden?"
                    >
                    <span class="fas fa-eye-slash m-1"></span>
                    Hide Sessions?
                </button>
            {:else}
                <button
                    type="button"
                    on:click={() => {
                        if ($events_loc.pres_mgmt.qry_hidden == 'all') {
                            $events_loc.pres_mgmt.qry_hidden = 'not_hidden';
                        } else {
                            $events_loc.pres_mgmt.qry_hidden = 'all';
                        }
                    }}
                    class="btn btn-sm variant-ghost-warning"
                    title="Show all (hidden) sessions?"
                    >
                    <span class="fas fa-eye m-1"></span>
                    Show All (Hidden) Sessions?
                </button>
            {/if}

            {#if $ae_loc.administrator_access}
                {#if $events_loc.pres_mgmt.qry_enabled == 'all'}
                    <button
                        type="button"
                        on:click={() => {
                            if ($events_loc.pres_mgmt.qry_enabled == 'all') {
                                $events_loc.pres_mgmt.qry_enabled = 'enabled';
                            } else {
                                $events_loc.pres_mgmt.qry_enabled = 'all';
                            }
                        }}
                        class="btn btn-sm variant-ghost-success"
                        title="Hide disabled sessions?"
                        >
                        <span class="fas fa-eye-slash m-1"></span>
                        Hide Disabled Sessions?
                    </button>
                {:else}
                    <button
                        type="button"
                        on:click={() => {
                            if ($events_loc.pres_mgmt.qry_enabled == 'all') {
                                $events_loc.pres_mgmt.qry_enabled = 'enabled';
                            } else {
                                $events_loc.pres_mgmt.qry_enabled = 'all';
                            }
                        }}
                        class="btn btn-sm variant-ghost-warning"
                        title="Show disabled sessions?"
                        >
                        <span class="fas fa-eye m-1"></span>
                        Show All (Disabled) Sessions?
                    </button>
                {/if}
            {/if}
            </div>
        {/if}

    </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="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__session_search != 'help'}
        />

    <div>
        <button
            type="button"
            on:click={() => {
                $events_loc.pres_mgmt.show_menu__session_search = !$events_loc.pres_mgmt.show_menu__session_search;
            }}
            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
            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 -->
