<script lang="ts">
    interface Props {
        data?: any;
        log_lvl?: number;
        // import Sign_in_out from './sign_in_out.svelte'; // Should this be used here later???
        lq__event_obj: any;
        lq__event_presenter_obj: any;
    }

    let {
        data = null,
        log_lvl = 0,
        lq__event_obj,
        lq__event_presenter_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';
</script>

<!-- New standard page specific menu 2025-06-20 -->
<div class="pres_mgmt__presenter_view_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={false}
            event_id={$lq__event_presenter_obj?.event_id}
            events__reports={$lq__event_presenter_obj?.event_id &&
                $ae_loc.trusted_access}
            events__session_id={$lq__event_presenter_obj?.event_session_id}
            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 the regular presenter view and managing presenter files -->
            <button
                type="button"
                onclick={() => {
                    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:preset-filled-primary-500={$events_loc.pres_mgmt
                    .show_content__presenter_view == 'manage_files'}
                class:preset-tonal-primary={$events_loc.pres_mgmt
                    .show_content__presenter_view != 'manage_files'}
                class:hidden={!$ae_loc.authenticated_access || 1 == 1}
                title="View presenter information or 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
                        class="badge badge-icon preset-tonal-success absolute -top-1.5 -right-1.5 z-10"
                        class:hidden={!$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"
                onclick={() => {
                    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="btn btn-sm mx-1"
                class:ae_btn_info_filled={$events_loc.pres_mgmt
                    .show_menu__presenter == 'options'}
                class:ae_btn_info={$events_loc.pres_mgmt.show_menu__presenter !=
                    'options'}
                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"
                onclick={() => {
                    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="btn btn-sm mx-1"
                class:ae_btn_info_filled={$events_loc.pres_mgmt
                    .show_menu__presenter == 'help'}
                class:ae_btn_info={$events_loc.pres_mgmt.show_menu__presenter !=
                    'help'}
                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}
                    Help?
                {/if}
            </button>
        </span>

        {#if $events_loc.pres_mgmt?.require__presenter_agree}
            <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]} -->
                    <button
                        type="button"
                        disabled={!$ae_loc.trusted_access &&
                            !$events_loc.auth__kv.presenter[
                                $lq__event_presenter_obj
                                    ?.event_presenter_id
                            ]}
                        onclick={() => {
                            $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;
                            // $lq__event_presenter_obj = $lq__event_presenter_obj;

                            $events_sess.pres_mgmt.show_modal__presenter_agree =
                                $lq__event_presenter_obj?.event_presenter_id;
                        }}
                        class="btn btn-sm mx-1 font-bold ae_btn_success_filled"
                        title="Agreed to terms and conditions"
                    >
                        <span
                            class="fas fa-check text-green-500 px-1"
                            title="Agreed to terms and conditions"
                        ></span>
                        <span> Agreed </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        disabled={!$ae_loc.trusted_access &&
                            !$events_loc.auth__kv.presenter[
                                $lq__event_presenter_obj
                                    ?.event_presenter_id
                            ]}
                        onclick={() => {
                            $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;
                            // $lq__event_presenter_obj = $lq__event_presenter_obj;

                            $events_sess.pres_mgmt.show_modal__presenter_agree =
                                $lq__event_presenter_obj?.event_presenter_id;
                        }}
                        class="btn btn-sm mx-1 font-bold ae_btn_warning_filled"
                        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>
                        <span> Not yet agreed </span>
                    </button>
                {/if}
            </span>
        {/if}
    </div>
    <!-- END: The menu button options -->

    <!-- BEGIN: The expanded menu area for information and options -->
    <div
        class="flex flex-row flex-wrap 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'}
    >
        <button
            type="button"
            onclick={async () => {
                await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id, fields: { priority: !$lq__event_presenter_obj?.priority } });
                events_func.load_ae_obj_id__event_presenter({ api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id, log_lvl });
            }}
            class="btn btn-sm m-1 *:hover:inline"
            class:ae_btn_surface_outlined={!$lq__event_presenter_obj?.priority}
            class:ae_btn_success={$lq__event_presenter_obj?.priority}
        >
            {#if $lq__event_presenter_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"
            onclick={async () => {
                await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id, fields: { hide: !$lq__event_presenter_obj?.hide } });
                events_func.load_ae_obj_id__event_presenter({ api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id, log_lvl });
            }}
            class="btn btn-sm m-1 *:hover:inline"
            class:ae_btn_success_outlined={!$lq__event_presenter_obj?.hide}
            class:ae_btn_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-eye m-1"></span>
                <span class="hidden"> Not Hidden </span>
            {/if}
        </button>

        <!-- Enable/Disable -->
        <button
            type="button"
            onclick={async () => {
                await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_presenter', obj_id: $lq__event_presenter_obj?.event_presenter_id, fields: { enable: !$lq__event_presenter_obj?.enable } });
                events_func.load_ae_obj_id__event_presenter({ api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id, log_lvl });
            }}
            class="btn btn-sm"
            class:ae_btn_success_outlined={$lq__event_presenter_obj?.enable}
            class:ae_btn_error={!$lq__event_presenter_obj?.enable}
            disabled={!$ae_loc.manager_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}
        </button>

        <!-- Sort -->

        <!-- Group -->

        {#if $ae_loc.manager_access}
            <button
                type="button"
                onclick={() => {
                    if (
                        !confirm(
                            'Are you sure you want to delete this presenter?'
                        )
                    ) {
                        return false;
                    }

                    (events_func as any)
                        .delete_ae_obj_id__event_presenter({
                            api_cfg: $ae_api,
                            event_presentation_id:
                                $lq__event_presenter_obj.event_presentation_id,
                            event_presenter_id:
                                $lq__event_presenter_obj.event_presenter_id,
                            method: 'delete'
                        })
                        .then(function (delete_results: any) {
                            $events_slct.event_presenter_id = null;
                            $events_slct.event_presenter_obj = {};

                            goto(
                                `/events/${$lq__event_presenter_obj.event_id}/session/${$lq__event_presenter_obj.event_session_id}`
                            );
                        });

                }}
                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.trusted_access}
            <button
                type="button"
                onclick={() => {
                    if (
                        !confirm(
                            'Are you sure you want to remove (disable) this presenter?'
                        )
                    ) {
                        return false;
                    }
                    events_func
                        .delete_ae_obj_id__event_presenter({
                            api_cfg: $ae_api,
                            event_presenter_id:
                                $lq__event_presenter_obj.event_presenter_id,
                            method: 'disable'
                        })
                        .then(function (delete_results: any) {
                            $events_slct.event_presenter_id = null;
                            $events_slct.event_presenter_obj = {};

                            goto(
                                `/events/${$lq__event_presenter_obj.event_id}/session/${$lq__event_presenter_obj.event_session_id}`
                            );
                        });

                }}
                class="btn btn-sm mx-1 ae_btn_warning"
                title="Disable record"
            >
                <span class="fas fa-minus mx-1"></span>
                Delete
            </button>
        {/if}

        {#if $ae_loc.administrator_access}
            {#if $events_loc.pres_mgmt.show_content__presenter_qr}
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.show_content__presenter_qr = false;
                    }}
                    class="btn btn-sm ae_btn_surface"
                >
                    <span class="fas fa-toggle-on m-1"></span>
                    Showing QR Code
                </button>
            {:else}
                <button
                    type="button"
                    onclick={() => {
                        $events_loc.pres_mgmt.show_content__presenter_qr = true;
                    }}
                    class="btn btn-sm ae_btn_surface_outlined"
                >
                    <span class="fas fa-toggle-off m-1"></span>
                    Show QR Code?
                </button>
            {/if}
        {/if}

        {#if $ae_loc.trusted_access}
            {#if $ae_loc.edit_mode}
                <button
                    type="button"
                    onclick={() => {
                        $ae_loc.edit_mode = false;
                    }}
                    class="btn btn-sm ae_btn_warning"
                >
                    <!-- <span class="fas fa-toggle-on m-1"></span> -->
                    <span class="fas fa-edit m-1"></span>
                    Edit Mode On
                </button>
            {:else}
                <button
                    type="button"
                    onclick={() => {
                        $ae_loc.edit_mode = true;
                    }}
                    class="btn btn-sm ae_btn_warning_outlined"
                >
                    <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}
        class_li="ae_container_module_help"
        show_edit={false}
        show_edit_btn={true}
        hide={$events_loc.pres_mgmt.show_menu__presenter != 'help'}
    />

    <div>
        <button
            type="button"
            onclick={() => {
                $events_loc.pres_mgmt.show_menu__presenter =
                    !$events_loc.pres_mgmt.show_menu__presenter;
            }}
            class="btn btn-sm mx-1 ae_btn_info_filled"
            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 -->
