<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';
import { goto } from '$app/navigation';

export let lq__event_presenter_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__presenter_view_menu {ae_snip.classes__events_pres_mgmt_menu}"
    class:border-gray-100={!$events_loc.pres_mgmt.show_menu__presenter}
    >

    <!-- 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"
        >
        <a href="/events_pres_mgmt/event/{$lq__event_presenter_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>

        <a href="/events_pres_mgmt/session/{$lq__event_presenter_obj?.event_session_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
            <span class="fas fa-arrow-left m-1"></span>
            Back to Session
        </a>
    </span>

    <span
        class="ae_menu__object_options flex flex-row items-center justify-around"
        >
        <!-- Button to toggle between the regular presenter view and managing presenter files -->
        <button
            type="button"
            on:click={() => {
                if ($events_loc.pres_mgmt.show_content__presenter_view == 'manage_files') {
                    $events_loc.pres_mgmt.show_content__presenter_view = null;
                } else {
                    $events_loc.pres_mgmt.show_content__presenter_view = 'manage_files';
                }
            }}
            class="{ae_snip.classes__events_pres_mgmt_menu__button_special}"
            class:hidden={!$ae_loc.authenticated_access}
            title="Manage files for the presenter"
            >
            {#if $events_loc.pres_mgmt.show_content__presenter_view == 'manage_files'}
                <span class="fas fa-info m-1"></span>
                <!-- View Details -->
                Presenter Info
            {:else}
                <span class="fas fa-file-archive m-1"></span>
                Presenter Files
                <!-- <span> -->
                    {$lq__event_presenter_obj?.file_count ? `(${$lq__event_presenter_obj?.file_count})` : ''}
                <!-- </span> -->
            {/if}
        </button>

        <!-- Button to toggle between showing and not showing the extended options menu -->
        <button
            type="button"
            on:click={() => {
                if ($events_loc.pres_mgmt.show_menu__presenter == 'options') {
                    $events_loc.pres_mgmt.show_menu__presenter = null;
                } else {
                    $events_loc.pres_mgmt.show_menu__presenter = '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__presenter == 'options'}
                Hide
            {:else}
                <span class="hidden">
                Show
                </span>
            {/if}
            Options?
        </button>

        <button
            type="button"
            on:click={() => {
                if ($events_loc.pres_mgmt.show_menu__presenter == 'help') {
                    $events_loc.pres_mgmt.show_menu__presenter = null;
                } else {
                    $events_loc.pres_mgmt.show_menu__presenter = 'help';
                }
            }}
            class="{ae_snip.classes__events_pres_mgmt_menu__button} transition-all hover:transition-all *:hover:inline"
            class:variant-ghost-success={$events_loc.pres_mgmt.show_menu__presenter == 'help'}
            class:variant-ringed-warning={true}
            title="Help and information about the presenter"
            >
            <span class="fas fa-question-circle m-1"></span>
            {#if $events_loc.pres_mgmt.show_menu__presenter == 'help'}
                Hide Help?
            {:else}
                <!-- <span class="hidden m-0 p-0">
                Show
                </span> -->
                <!-- <span class="m-0 p-0"> -->
                Help?
                <!-- </span> -->
            {/if}
        </button>
    </span>

    <span
        class="ae_menu__action_options flex flex-row items-center justify-around"
        >
        {#if $lq__event_presenter_obj?.agree}
            <!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.presenter[$lq__event_presenter_obj.event_presenter_id_random]} -->
            <button
                type="button"
                disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
                on:click={
                    () => {
                        $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
                        // $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;

                        $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id_random;
                        // $lq__event_presenter_obj = $lq__event_presenter_obj;

                        $events_sess.pres_mgmt.show_content__agree_text = $lq__event_presenter_obj?.event_presenter_id_random;
                    }
                }
                class="{ae_snip.classes__events_pres_mgmt_menu__button} hover:variant-filled-success"
                title="Agreed to terms and conditions"
                >
                <span class="fas fa-check text-green-500 px-1" title="Agreed to terms and conditions"></span>
                Agreed
            </button>
        {:else}
            <button
                type="button"
                disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id_random]}
                on:click={
                    () => {
                        $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
                        // $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;

                        $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id_random;
                        // $lq__event_presenter_obj = $lq__event_presenter_obj;

                        $events_sess.pres_mgmt.show_content__agree_text = $lq__event_presenter_obj?.event_presenter_id_random;
                    }
                }
                class="{ae_snip.classes__events_pres_mgmt_menu__button_warning_special} hover:variant-filled-warning"
                title="View terms and conditions"
                >
                <span class="fas fa-times bg-red-500 text-white px-1 mx-1" title="Not agreed to terms and conditions"></span>
                Not yet agreed
            </button>
        {/if}
    </span>


    </div> <!-- END: The menu button options -->


    <!-- BEGIN: The expanded menu area for information and options -->
    <div
        class="flex flex-row 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__presenter != 'options'}
        >
        <Element_ae_crud
            trigger_patch={ae_triggers.priority}
            api_cfg={$ae_api}
            object_type={'event_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_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_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
                    log_lvl: 1
                });
            }}
            >
            <!-- {@html $lq__event_presenter_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_presenter_obj?.priority;

                    ae_triggers.priority = true;
                }}
                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
                class:variant-ringed-surface={!$lq__event_presenter_obj?.priority}
                class:variant-ghost-success={$lq__event_presenter_obj?.priority}
                >
                {#if $lq__event_presenter_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_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_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_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
                    log_lvl: 1
                });
            }}
            >
            <!-- {($lq__event_presenter_obj?.hide ? 'Hidden' : 'Not Hidden')} -->
            <button
                on:click={() => {
                    ae_tmp.value__hide = !$lq__event_presenter_obj?.hide;

                    // $events_slct.exhibit_tracking_obj.hide = !$lq__event_presenter_obj?.hide;
                    ae_triggers.hide = true;
                }}
                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
                class:variant-ghost-success={!$lq__event_presenter_obj?.hide}
                class:variant-ringed-warning={$lq__event_presenter_obj?.hide}
                disabled={!$ae_loc.trusted_access}
                >
                {#if $lq__event_presenter_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_presenter_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_presenter'}
            object_id={$lq__event_presenter_obj?.event_presenter_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_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
                    log_lvl: 1
                })
                .then(function (load_results) {
                    // Maybe reload page?
                    // window.location.reload();
                });
            }}
            >
            <!-- {($lq__event_presenter_obj?.enable ? 'Enabled' : 'Disabled')} -->
            <button
                on:click={() => {
                    ae_tmp.value__enable = !$lq__event_presenter_obj?.enable;

                    ae_triggers.enable = true;
                }}
                class="btn btn-sm"
                class:variant-ghost-success={$lq__event_presenter_obj?.enable}
                class:variant-ringed-warning={!$lq__event_presenter_obj?.enable}
                disabled={!$ae_loc.administrator_access}
                >
                {#if $lq__event_presenter_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_presenter_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.administrator_access}
        <button
            on:click={() => {
                if (!confirm('Are you sure you want to delete this speaker?')) {return false;}
                events_func.handle_delete_ae_obj_id__event_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random,
                    method: 'delete'
                })
                .then(function (delete_results) {
                    $events_slct.event_presenter_id = null;
                    $events_slct.event_presenter_obj = {};

                    goto(`/events_pres_mgmt/session/${$lq__event_presenter_obj.event_session_id_random}`);
                });
            }}
            class="btn btn-sm variant-ghost-error mx-1" type="button"
            title="Delete record permanently"
            >
            <span class="fas fa-minus-circle mx-1"></span>
            Delete
        </button>
        {:else if $ae_loc.trusted_access}
        <button
            on:click={() => {
                if (!confirm('Are you sure you want to remove (disable) this speaker?')) {return false;}
                events_func.handle_delete_ae_obj_id__event_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random,
                    method: 'disable'
                })
                .then(function (delete_results) {
                    $events_slct.event_presenter_id = null;
                    $events_slct.event_presenter_obj = {};

                    goto(`/events_pres_mgmt/session/${$lq__event_presenter_obj.event_session_id_random}`);
                });
            }}
            class="btn btn-sm variant-ghost-warning mx-1" type="button"
            title="Disable record"
            >
            <span class="fas fa-minus mx-1"></span>
            Delete
        </button>
        {/if}
        <!-- {:else if $ae_loc.authenticated_access}
        <button
            on:click={() => {
                if (!confirm('Are you sure you want to hide this speaker?')) {return false;}
                events_func.handle_delete_ae_obj_id__event_presenter({
                    api_cfg: $ae_api,
                    event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random.event_presenter_id,
                    method: 'hide'
                });

                $events_slct.event_presenter_id = null;
                $events_slct.event_presenter_obj = {};

                goto('/events_pres_mgmt/session/{$lq__event_presenter_obj.event_session_id_random}');
            }}
            class="btn btn-sm variant-ghost-warning mx-1" type="button"
            title="Hide record"
            >
            <span class="fas fa-trash mx-1"></span>
            Delete
        </button>
        {/if} -->

        {#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-ghost-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-ringed-warning"
                    >
                    <span class="fas fa-toggle-off m-1"></span>
                    <!-- <span class="fas fa-edit m-1"></span> -->
                    Edit Mode?
                </button>
            {/if}
        {/if}

    </div> <!-- END: The expanded menu area for information and options -->


    <Element_data_store
        ds_code="events__pres_mgmt__presenter_page_help"
        ds_name="Default: Events - Pres Mgmt Presenter Page Help"
        ds_type="html"
        for_type="event"
        for_id={$lq__event_presenter_obj?.event_id_random}
        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__presenter != 'help'}
        />

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