<script lang="ts">
interface Props {
    lq__event_obj: any;
}

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

import { Modal } from 'flowbite-svelte';
import { Info, Settings, ToggleLeft, ToggleRight, X } from '@lucide/svelte';

import { ae_loc } from '$lib/stores/ae_stores';
import { events_slct } from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';

import Element_data_store from '$lib/elements/element_data_store.svelte';
import Comp__events_menu_nav from '../../../ae_comp__events_menu_nav.svelte';

let show_modal = $state(false);
let show_help = $state(false);
</script>

<div class="pres_mgmt__locations_menu ae_container_module_menu">
    <div
        class="flex w-full flex-row flex-wrap items-center justify-around gap-1">
        <Comp__events_menu_nav
            hide={!$ae_loc.authenticated_access}
            event_id={$lq__event_obj?.event_id}
            ae_core={$ae_loc.edit_mode && $ae_loc.manager_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 items-center justify-around gap-0.5">
            <!-- Options modal trigger -->
            {#if $ae_loc.trusted_access}
                <button
                    type="button"
                    onclick={() => (show_modal = true)}
                    class="btn btn-sm ae_btn_info"
                    title="Location list options">
                    <Settings size="1em" class="mr-1" />
                    Options
                </button>
            {/if}

            <!-- Help toggle -->
            <button
                type="button"
                onclick={() => (show_help = !show_help)}
                class="btn btn-sm"
                class:ae_btn_info_filled={show_help}
                class:ae_btn_info={!show_help}
                title="Help and information about locations">
                <Info size="1em" class="mr-1" />
                {show_help ? 'Hide Help' : 'Help'}
            </button>
        </span>
    </div>

    <!-- Options Modal -->
    <Modal
        bind:open={show_modal}
        autoclose={false}
        dismissable={true}
        placement="top-center"
        size="sm"
        class="relative mx-auto flex w-full flex-col rounded-lg bg-white text-gray-800 shadow-xl dark:bg-gray-800 dark:text-gray-200"
        headerClass="flex flex-row gap-2 items-center justify-between w-full bg-surface-100 dark:bg-surface-800 p-4 rounded-t-lg border-b border-surface-200 dark:border-surface-700">
        {#snippet header()}
            <h3 class="flex flex-1 items-center gap-2 text-base font-bold">
                <Settings size="1.1em" class="text-primary-500" />
                Locations Display Options
            </h3>
            <button
                type="button"
                class="btn-icon btn-icon-sm preset-tonal-surface ml-2"
                onclick={() => (show_modal = false)}>
                <X size="1.1em" />
            </button>
        {/snippet}

        <div class="flex flex-col gap-4 p-4">
            <section>
                <h4
                    class="text-surface-500 mb-2 text-xs font-semibold tracking-wider uppercase">
                    Content
                </h4>
                <div class="flex flex-col gap-1">
                    <!-- Session list vs Device list per location -->
                    <button
                        type="button"
                        onclick={() => {
                            pres_mgmt_loc.current.show_content__location_devices_sessions =
                                pres_mgmt_loc.current.show_content__location_devices_sessions ===
                                'sessions'
                                    ? 'devices'
                                    : 'sessions';
                        }}
                        class="btn btn-sm w-full justify-between"
                        class:ae_btn_surface={pres_mgmt_loc.current.show_content__location_devices_sessions ===
                            'sessions'}
                        class:ae_btn_surface_outlined={pres_mgmt_loc.current.show_content__location_devices_sessions !==
                            'sessions'}
                        title="Toggle between showing sessions or devices for each location">
                        {#if pres_mgmt_loc.current.show_content__location_devices_sessions === 'sessions'}<ToggleRight
                                size="1em"
                                class="mr-1" />{:else}<ToggleLeft
                                size="1em"
                                class="mr-1" />{/if}
                        {pres_mgmt_loc.current.show_content__location_devices_sessions ===
                        'sessions'
                            ? "Location's Session List"
                            : "Location's Device List"}
                    </button>
                </div>
            </section>

            <section>
                <h4
                    class="text-surface-500 mb-2 text-xs font-semibold tracking-wider uppercase">
                    Show Codes
                </h4>
                <div class="flex flex-col gap-1">
                    <button
                        type="button"
                        onclick={() => {
                            pres_mgmt_loc.current.hide__device_code =
                                !pres_mgmt_loc.current.hide__device_code;
                        }}
                        class="btn btn-sm w-full justify-between"
                        class:ae_btn_surface={!pres_mgmt_loc.current.hide__device_code}
                        class:ae_btn_surface_outlined={pres_mgmt_loc.current.hide__device_code}>
                        {#if pres_mgmt_loc.current.hide__device_code}<ToggleLeft
                                size="1em"
                                class="mr-1" />{:else}<ToggleRight
                                size="1em"
                                class="mr-1" />{/if}
                        {pres_mgmt_loc.current.hide__device_code
                            ? 'Show Device Code?'
                            : 'Device Code Visible'}
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            pres_mgmt_loc.current.hide__location_code =
                                !pres_mgmt_loc.current.hide__location_code;
                        }}
                        class="btn btn-sm w-full justify-between"
                        class:ae_btn_surface={!pres_mgmt_loc.current.hide__location_code}
                        class:ae_btn_surface_outlined={pres_mgmt_loc.current.hide__location_code}>
                        {#if pres_mgmt_loc.current.hide__location_code}<ToggleLeft
                                size="1em"
                                class="mr-1" />{:else}<ToggleRight
                                size="1em"
                                class="mr-1" />{/if}
                        {pres_mgmt_loc.current.hide__location_code
                            ? 'Show Location Code?'
                            : 'Location Code Visible'}
                    </button>

                    <button
                        type="button"
                        onclick={() => {
                            pres_mgmt_loc.current.hide__session_code =
                                !pres_mgmt_loc.current.hide__session_code;
                        }}
                        class="btn btn-sm w-full justify-between"
                        class:ae_btn_surface={!pres_mgmt_loc.current.hide__session_code}
                        class:ae_btn_surface_outlined={pres_mgmt_loc.current.hide__session_code}>
                        {#if pres_mgmt_loc.current.hide__session_code}<ToggleLeft
                                size="1em"
                                class="mr-1" />{:else}<ToggleRight
                                size="1em"
                                class="mr-1" />{/if}
                        {pres_mgmt_loc.current.hide__session_code
                            ? 'Show Session Code?'
                            : 'Session Code Visible'}
                    </button>
                </div>
            </section>
        </div>
    </Modal>

    <!-- Help panel -->
    <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="ae_container_module_help"
        show_edit={false}
        show_edit_btn={true}
        hide={!show_help} />
</div>
