<script lang="ts">
interface Props {
    log_lvl?: number;
    container_class_li?: string | Array<string>;
    // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
    // link_to_type: string;
    link_to_id: string;
    lq__event_location_obj_li: any;
}

let {
    log_lvl = 0,
    container_class_li = [],
    // link_to_type,
    link_to_id,
    lq__event_location_obj_li
}: Props = $props();

// Imports
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    events_sess,
    events_slct,
    events_trigger,
    events_trig_kv
} from '$lib/stores/ae_events_stores';
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
import { events_func } from '$lib/ae_events/ae_events_functions';

import Comp_event_session_obj_li from '../../../ae_comp__event_session_obj_li_wrapper.svelte';
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
import Comp_event_device_obj_li from '../device/device/ae_comp__event_device_obj_li_wrapper.svelte';
import {
    Barcode,
    ChevronDown,
    ChevronUp,
    Eye,
    EyeOff,
    MapPin,
    MapPinned,
    Plane,
    Plus,
    TriangleAlert
} from '@lucide/svelte';
// if (log_lvl) {
//     console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
// }

// Variables
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};

if (!pres_mgmt_loc.current.location_kv) {
    pres_mgmt_loc.current.location_kv = {};
}

// *** Functions and Logic
</script>

<section
    class="
    ae_comp event_location_obj_li
    container w-full min-w-full space-y-2
    overflow-x-scroll border-2 border-dashed
    border-x-red-500 border-y-white px-0.5
    py-2
    sm:border-x-red-400
    md:border-x-yellow-400 lg:border-x-gray-100 {container_class_li}
    ">
    <div class="float-right flex flex-row items-center">
        {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
            <button
                type="button"
                onclick={() => {
                    console.log('Add Location');
                    if (
                        !confirm(
                            'Add a new location to the event? You will be able to edit the details after the location is created.'
                        )
                    ) {
                        return;
                    }

                    let location_data = {
                        event_id: $events_slct.event_id,
                        name: 'TEMP Location Name',
                        enable: true
                    };

                    events_func.create_ae_obj__event_location({
                        api_cfg: $ae_api,
                        event_id: $events_slct.event_id,
                        data_kv: location_data,
                        log_lvl: log_lvl
                    });
                }}
                class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500">
                <Plus size="1em" class="mx-1" />
                Add Location
            </button>
        {/if}
    </div>

    <h3 class="h5">
        Locations:
        <span
            class="bg-success-100 border-success-200 rounded-lg border px-4 font-bold"
            class:hidden={!$lq__event_location_obj_li?.length}
            title="Locations: {$lq__event_location_obj_li?.length ?? 'None'}">
            <MapPinned size="1em" class="m-1 text-neutral-800/80" />
            {@html $lq__event_location_obj_li?.length
                ? `${$lq__event_location_obj_li?.length}&times;`
                : ''}
        </span>

        {#if !$lq__event_location_obj_li?.length}
            <span
                class="rounded-md border border-gray-200 bg-gray-100 p-1 text-sm text-gray-500">
                <TriangleAlert size="1em" class="mx-1" />
                No locations available.
            </span>
        {/if}
    </h3>

    <!-- Show locations for this LiveQuery -->
    {#if $lq__event_location_obj_li?.length}
        <ul class="m-2 space-y-4 rounded-md bg-gray-100 p-4">
            {#each $lq__event_location_obj_li as event_location_obj (event_location_obj.event_location_id)}
                <li
                    class="space-y-2 rounded-md border border-gray-200 p-2"
                    class:dim={event_location_obj?.hide}
                    class:hidden={event_location_obj?.hide &&
                        !$ae_loc.edit_mode}>
                    <h4
                        class="h5 flex flex-row items-center justify-between gap-1 rounded-md bg-gray-200 p-2">
                        <span>
                            <Element_ae_obj_field_editor
                                object_type={'event_location'}
                                object_id={event_location_obj?.event_location_id}
                                field_name={'name'}
                                field_type={'text'}
                                current_value={event_location_obj?.name}
                                allow_null={false}
                                display_block={false}
                                display_absolute_edit={false}
                                class_li={'m-1'}
                                on_success={() =>
                                    events_func.load_ae_obj_id__event_location({
                                        api_cfg: $ae_api,
                                        event_location_id:
                                            event_location_obj.event_location_id
                                    })}>
                                <MapPin
                                    size="1em"
                                    class="m-1 text-neutral-800/80" />
                                "{event_location_obj?.name ?? '-- not set --'}"
                            </Element_ae_obj_field_editor>

                            <!-- "{event_location_obj.name}" -->
                            {#if event_location_obj?.code && !pres_mgmt_loc.current.hide__location_code}
                                <span
                                    class="rounded-md border border-yellow-200 bg-yellow-100 p-1 text-sm text-gray-500"
                                    title="Location code {event_location_obj?.code}">
                                    <Barcode size="1em" />
                                    {event_location_obj?.code ?? ''}
                                </span>
                            {/if}
                        </span>

                        <span class="links">
                            <a
                                href="/events/{event_location_obj?.event_id}/location/{event_location_obj?.event_location_id}"
                                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 text-xs transition-all hover:transition-all *:hover:inline"
                                title="View this location">
                                <MapPin size="1em" class="m-1" />
                                <span class="hidden">View</span>
                            </a>

<a
                                href="/events/{event_location_obj?.event_id}/launcher/{event_location_obj?.event_location_id}"
                                class="btn btn-sm preset-tonal-tertiary border-tertiary-500 hover:preset-filled-secondary-500 border text-xs transition-all hover:transition-all *:hover:inline"
                                title="The new launcher that is actively being developed. Do not use with the native launcher.">
                                <Plane size="1em" class="m-1" />
                                <span class="hidden">Dev Launcher</span>
                            </a>
                        </span>

                        <button
                            type="button"
                            onclick={() => {
                                console.log('Show/Hide Location');
                                if (!pres_mgmt_loc.current.location_kv) {
                                    pres_mgmt_loc.current.location_kv = {
                                        [event_location_obj.event_location_id]:
                                            { collapse: true }
                                    };
                                } else if (
                                    !pres_mgmt_loc.current.location_kv[
                                        event_location_obj.event_location_id
                                    ]
                                ) {
                                    pres_mgmt_loc.current.location_kv[
                                        event_location_obj.event_location_id
                                    ] = {
                                        collapse: true
                                    };
                                } else {
                                    pres_mgmt_loc.current.location_kv[
                                        event_location_obj.event_location_id
                                    ].collapse =
                                        !pres_mgmt_loc.current.location_kv[
                                            event_location_obj.event_location_id
                                        ].collapse;
                                }
                            }}
                            class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-surface-500 border text-xs transition-all hover:transition-all *:hover:inline"
                            class:preset-tonal-warning={pres_mgmt_loc.current.location_kv[
                                event_location_obj.event_location_id
                            ]?.collapse}>
                            {#if pres_mgmt_loc.current.location_kv && pres_mgmt_loc.current.location_kv[event_location_obj.event_location_id]?.collapse}
                                <!-- <span class="fas fa-minus mx-1"></span> -->
                                <ChevronUp size="1em" class="m-1" />
                                <span class="hidden"> Show?</span>
                            {:else}
                                <ChevronDown size="1em" class="m-1" />
                                <!-- <span class="fas fa-plus mx-1"></span> -->
                                <!-- <span>Location</span> -->
                            {/if}
                        </button>
                    </h4>

                    <div
                        class:hidden={pres_mgmt_loc.current.location_kv &&
                            pres_mgmt_loc.current.location_kv[
                                event_location_obj.event_location_id
                            ]?.collapse}>
                        <div
                            class:hidden={!pres_mgmt_loc.current.show_content__location_description}>
                            <!-- <Element_ae_crud
                api_cfg={$ae_api}
                object_type={'event_location'}
                object_id={event_location_obj?.event_location_id}
                field_name={'description'}
                field_type={'textarea'}
                field_value={event_location_obj?.description}
                allow_null={false}
                hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
                outline_element={false}
                show_crud={false}
                display_inline={true}
                display_block_edit={true}
                textarea_rows={15}
                class_li={''}
                >
                <strong class="text-sm">
                    Description:
                </strong>

                {#if event_location_obj?.description}
                <button type="button"
                    onclick={() => {
                        console.log('Show/Hide Description');
                        if ($events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id) {
                            $events_sess.pres_mgmt.show_content__location_description = null;

                            // Was testing with LiveQuery
                            $events_slct.event_location_id = null;
                        } else {
                            $events_sess.pres_mgmt.show_content__location_description = event_location_obj.event_location_id;

                            // Was testing with LiveQuery
                            $events_slct.event_location_id = event_location_obj.event_location_id;
                        }
                    }}
                    class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
                    >
                    {#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id}
                        <span class="fas fa-eye-slash mx-1"></span>
                        <span>Hide Description</span>
                    {:else}
                        <span class="fas fa-eye mx-1"></span>
                        <span>Show</span>
                    {/if}
                </button>

                <pre
                    class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
                    class:hidden={$events_sess.pres_mgmt.show_content__location_description !== event_location_obj.event_location_id}
                    >{event_location_obj.description}</pre>

                {:else}
                    {@html ae_snip.html__not_set}
                {/if}
            </Element_ae_crud> -->

                            <Element_ae_obj_field_editor
                                object_type={'event_location'}
                                object_id={event_location_obj?.event_location_id}
                                field_name={'description'}
                                field_type={'textarea'}
                                current_value={event_location_obj?.description}
                                allow_null={true}
                                display_block={false}
                                display_absolute_edit={false}
                                textarea_rows={15}
                                class_li={'m-1'}
                                on_success={() =>
                                    events_func.load_ae_obj_id__event_location({
                                        api_cfg: $ae_api,
                                        event_location_id:
                                            event_location_obj.event_location_id
                                    })}>
                                <strong class="text-sm"> Description: </strong>

                                {#if event_location_obj?.description}
                                    <button
                                        type="button"
                                        onclick={() => {
                                            console.log(
                                                'Show/Hide Description'
                                            );
                                            if (
                                                $events_sess.pres_mgmt
                                                    .show_content__location_description ==
                                                event_location_obj.event_location_id
                                            ) {
                                                $events_sess.pres_mgmt.show_content__location_description =
                                                    null;

                                                // Was testing with LiveQuery
                                                $events_slct.event_location_id =
                                                    null;
                                            } else {
                                                $events_sess.pres_mgmt.show_content__location_description =
                                                    event_location_obj.event_location_id;

                                                // Was testing with LiveQuery
                                                $events_slct.event_location_id =
                                                    event_location_obj.event_location_id;
                                            }
                                        }}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs">
                                        {#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id}
                                            <EyeOff size="1em" class="mx-1" />
                                            <span>Hide Description</span>
                                        {:else}
                                            <Eye size="1em" class="mx-1" />
                                            <span>Show</span>
                                        {/if}
                                    </button>

                                    <pre
                                        class="rounded-md bg-gray-100 p-2 whitespace-pre-wrap"
                                        class:hidden={$events_sess.pres_mgmt
                                            .show_content__location_description !==
                                            event_location_obj.event_location_id}>{event_location_obj.description}</pre>
                                {:else}
                                    {@html ae_snip.html__not_set}
                                {/if}
                            </Element_ae_obj_field_editor>
                        </div>

                        {#if !pres_mgmt_loc.current.show_content__location_devices_sessions || pres_mgmt_loc.current.show_content__location_devices_sessions === 'sessions'}
                            <!-- Show sessions for this location -->
                            {#if event_location_obj?.event_location_id}
                                <Comp_event_session_obj_li
                                    link_to_type={'event_location'}
                                    link_to_id={event_location_obj?.event_location_id}
                                    event_session_id_random_li={[]}
                                    hide__session_location={true}
                                    hide__session_poc={pres_mgmt_loc.current.hide__session_poc ||
                                        !pres_mgmt_loc.current.show__session_li_poc_field}
                                    {log_lvl}></Comp_event_session_obj_li>
                            {/if}
                        {:else if pres_mgmt_loc.current.show_content__location_devices_sessions == 'devices'}
                            <!-- Show devices for this location -->
                            {#if event_location_obj?.event_location_id}
                                <Comp_event_device_obj_li
                                    link_to_type={'event_location'}
                                    link_to_id={event_location_obj?.event_location_id}
                                    event_device_id_random_li={[]}
                                    auto_refresh={pres_mgmt_loc.current.refresh_interval ?? 90000}
                                    {log_lvl}></Comp_event_device_obj_li>
                            {/if}
                        {/if}

                        <!-- Show files for this location -->
                    </div>
                </li>
            {/each}
        </ul>
    {:else}
        <!-- <p>
            No locations available to show at this time
        </p> -->
    {/if}
</section>
