<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_session_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_menu {ae_snip.classes__events_pres_mgmt_menu}"
    class:border-none={!$events_loc.pres_mgmt.show_menu__session}
    >

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

    <span
        class="ae_menu__navigation_options"
        >
        <a href="/events_pres_mgmt/event/{$events_slct.event_session_obj.event_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
            <span class="fas fa-arrow-left m-1"></span>
            Back to Session Search
        </a>
    </span>

    <span
        class="ae_menu__object_options"
        >
        <button
            type="button"
            on:click={() => {
                if ($events_loc.pres_mgmt.show_menu__session == 'options') {
                    $events_loc.pres_mgmt.show_menu__session = null;
                } else {
                    $events_loc.pres_mgmt.show_menu__session = 'options';
                }
                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
            }}
            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
            class:hidden={!$ae_loc.trusted_access}
            title="Options for the session"
            >
            <span class="fas fa-cog m-1"></span>
            {#if $events_loc.pres_mgmt.show_menu__session == 'options'}
                Hide
            {:else}
                Show
            {/if}
            Options
        </button>

        <button
            type="button"
            on:click={() => {
                if ($events_loc.pres_mgmt.show_menu__session == 'help') {
                    $events_loc.pres_mgmt.show_menu__session = null;
                } else {
                    $events_loc.pres_mgmt.show_menu__session = 'help';
                }
                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
            }}
            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
            title="Help and information about the session"
            >
            <span class="fas fa-question-circle m-1"></span>
            {#if $events_loc.pres_mgmt.show_menu__session == 'help'}
                Hide
            {:else}
                Show
            {/if}
            Help?
        </button>
    </span>

    <span
        class="ae_menu__action_options"
        class:hidden={!$events_loc.auth__person?.id}
        >
        <!-- The Sign_in_out component is usually just a button for Sign Out if they are signed in as a POC or presenter. -->
        <Sign_in_out data={data} />
    </span>

    </div> <!-- End of the menu button options -->


    <!-- The expanded menu area for information and options -->
    <div
        class="flex flex-row items-center justify-around w-full"
        class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
        >
        <Element_ae_crud
            trigger_patch={ae_triggers.priority}
            api_cfg={$ae_api}
            object_type={'event_session'}
            object_id={$lq__event_session_obj?.event_session_id_random}
            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={'m-1'}
            on:ae_crud_updated={e => {
                console.log(`ae_crud_updated:`, e.detail);

                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
            }}
            >
            <!-- {@html $lq__event_session_obj?.priority ? '<span class="fas fa-star m-1"></span> High Priority' : '<span class="far fa-star m-1"></span> Priority not set'} -->
            <button
                on:click={() => {
                    ae_tmp.value__priority = !$lq__event_session_obj?.priority;

                    // $events_slct.exhibit_tracking_obj.priority = !$lq__event_session_obj?.priority;
                    ae_triggers.priority = true;
                }}
                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
                class:variant-soft-success={!$lq__event_session_obj?.priority}
                class:variant-soft-warning={$lq__event_session_obj?.priority}
                >
                {#if $lq__event_session_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_session'}
            object_id={$lq__event_session_obj?.event_session_id_random}
            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={'m-1'}
            on:ae_crud_updated={e => {
                console.log(`ae_crud_updated:`, e.detail);

                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
            }}
            >
            <!-- {($lq__event_session_obj?.hide ? 'Hidden' : 'Not Hidden')} -->
            <button
                on:click={() => {
                    ae_tmp.value__hide = !$lq__event_session_obj?.hide;

                    // $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
                    ae_triggers.hide = true;
                }}
                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
                class:variant-soft-success={!$lq__event_session_obj?.hide}
                class:variant-soft-warning={$lq__event_session_obj?.hide}
                disabled={!$ae_loc.trusted_access}
                >
                {#if $lq__event_session_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_session_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_session'}
            object_id={$lq__event_session_obj?.event_session_id_random}
            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={'m-1'}
            on:ae_crud_updated={e => {
                console.log(`ae_crud_updated:`, e.detail);

                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1})
                .then(function (load_results) {
                    // Maybe reload page?
                    // window.location.reload();
                });
            }}
            >
            <!-- {($lq__event_session_obj?.enable ? 'Enabled' : 'Disabled')} -->
            <button
                on:click={() => {
                    ae_tmp.value__enable = !$lq__event_session_obj?.enable;

                    // $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
                    ae_triggers.enable = true;
                }}
                class="btn btn-sm"
                class:variant-soft-success={$lq__event_session_obj?.enable}
                class:variant-soft-warning={!$lq__event_session_obj?.enable}
                disabled={!$ae_loc.administrator_access}
                >
                {#if $lq__event_session_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_session_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.access_type && $ae_loc.access_type != 'anonymous' && $ae_loc.access_type != 'authenticated'}
            {#if $ae_loc.edit_mode}
                <button
                    on:click={() => {
                        $ae_loc.edit_mode = false;
                    }}
                    class="btn btn-sm variant-soft-success"
                    >
                    <!-- <span class="fas fa-toggle-on m-1"></span> -->
                    <span class="fas fa-edit m-1"></span>
                    Edit Mode On
                </button>
            {:else}
                <button
                    on:click={() => {
                        $ae_loc.edit_mode = true;
                    }}
                    class="btn btn-sm variant-soft-warning"
                    >
                    <span class="fas fa-toggle-off m-1"></span>
                    <!-- <span class="fas fa-edit m-1"></span> -->
                    Edit Mode?
                </button>
            {/if}
        {/if}
    </div>

    <Element_data_store
        ds_code="events__pres_mgmt__session_help"
        ds_name="Default: Events - Pres Mgmt Session Help"
        ds_type="html"
        for_type="event"
        for_id={$events_slct.event_id}
        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
        show_edit={false}
        show_edit_btn={true}
        hide={$events_loc.pres_mgmt.show_menu__session != 'help'}
        />

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