<script lang="ts">
interface Props {
    log_lvl?: number;
    hide__launcher_link?: boolean;
    lq__event_location_obj: any;
}

let {
    log_lvl = 0,
    hide__launcher_link = false,
    lq__event_location_obj
}: Props = $props();

console.log(`ae_events_pres_mgmt location_view.svelte`);

import { liveQuery } from 'dexie';

// const dispatch = createEventDispatcher();

import type { key_val } from '$lib/stores/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
import Element_data_store from '$lib/elements/element_data_store.svelte';

let ae_promises: key_val = $state({});
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};

import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_events } from '$lib/ae_events/db_events';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig
} 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 { Barcode, Eye, EyeOff, Key, Plane } from '@lucide/svelte';
// Exports
// export let event_location_id: string;
// export let event_location_obj: key_val;
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

if (!$events_sess.pres_mgmt) {
    $events_sess.pres_mgmt = {};
}

let lq__event_presentation_obj = $derived(
    liveQuery(async () => {
        let results = await db_events.presentation.get(
            $events_slct.event_presentation_id
        );
        return results;
    })
);

$events_sess.pres_mgmt.location__updated_on = null;
$effect(() => {
    if ($lq__event_location_obj) {
        if (log_lvl > 1) {
            console.log(`$lq__event_location_obj:`, $lq__event_location_obj);
        }

        if (pres_mgmt_loc.current.show_content__location_qr) {
            if (
                $lq__event_location_obj.updated_on ==
                $events_sess.pres_mgmt.location__updated_on
            ) {
                if (log_lvl > 1) {
                    console.log('Updated on is the same.');
                }
            } else {
                if (log_lvl) {
                    console.log('Updated on is different.');
                }
                // FUTURE USE: Generate a QR code for the object ID.
                // ae_promises.generate_qr_code_obj_id = core_func.generate_qr_code({api_cfg: $ae_api, account_id: $slct.account_id, qr_type: 'obj', qr_id: $lq__event_location_obj?.event_location_id, obj_type: 'event_location', obj_id: $lq__event_location_obj?.event_location_id});

                // Generate a QR code for the URL.
                // URL for this page (be sure to URL encode it):
                let url_str = `${$ae_loc.url_origin}/events/${$lq__event_location_obj?.event_id}/location/${$lq__event_location_obj?.event_location_id}`;
                url_str = encodeURI(url_str);

                ae_promises.generate_qr_code_url =
                    core_func.js_generate_qr_code('str', { str: url_str });

                $events_sess.pres_mgmt.location__updated_on =
                    $lq__event_location_obj?.updated_on;
            }
        } else {
            if (log_lvl) {
                console.log('Clearing the URL.');
            }
            ae_promises.generate_qr_code_url = null;
            // Resetting the updated_on value helps with the QR code come back when switched back on.
            $events_sess.pres_mgmt.location__updated_on = null;
        }
    }
});
</script>

{#if $lq__event_location_obj}
    <section class="p-2">
        <!-- {#await ae_promises.generate_qr_code_url}
    Generating...
{:then result}
    {#if ae_promises.generate_qr_code_url && $ae_loc.trusted_access}
        <span class="float-right m-1 p-1 flex flex-col items-center justify-center outline outline-gray-200 *:hover:inline">
            <img
                class="qr_code qr_type_url h-32 w-32 hover:h-48 hover:w-48"
                style=""
                src={result}
                alt="URL QR code"
                />
            <span>
                <span class="fas fa-link"></span>
                <span>Location URL</span>
            </span>
            <div class="hidden">
                This QR is a link back to this page.
            </div>
        </span>
    {/if}
{/await} -->

        <ul class="space-y-2 px-4">
            <li class:hidden={!$ae_loc.manager_access || !$ae_loc.edit_mode}>
                <Element_ae_obj_field_editor
                    object_type={'event_location'}
                    object_id={$lq__event_location_obj?.event_location_id}
                    field_name={'external_id'}
                    field_type={'text'}
                    current_value={$lq__event_location_obj?.external_id}
                    allow_null={true}
                    display_block={true}
                    on_success={() =>
                        events_func.load_ae_obj_id__event_location({
                            api_cfg: $ae_api,
                            event_location_id:
                                $lq__event_location_obj?.event_location_id,
                            log_lvl: 1
                        })}>
                    <strong class="text-sm">External ID:</strong>
                    {$lq__event_location_obj.external_id}
                </Element_ae_obj_field_editor>
            </li>

            <li
                class:hidden={!$ae_loc.administrator_access ||
                    !$ae_loc.edit_mode}>
                <Element_ae_obj_field_editor
                    object_type={'event_location'}
                    object_id={$lq__event_location_obj?.event_location_id}
                    field_name={'code'}
                    field_type={'text'}
                    current_value={$lq__event_location_obj?.code}
                    allow_null={true}
                    display_block={true}
                    on_success={() =>
                        events_func.load_ae_obj_id__event_location({
                            api_cfg: $ae_api,
                            event_location_id:
                                $lq__event_location_obj?.event_location_id,
                            log_lvl: 1
                        })}>
                    <strong class="text-sm">Code:</strong>
                    {$lq__event_location_obj.code}
                </Element_ae_obj_field_editor>
            </li>

            <li>
                <Element_ae_obj_field_editor
                    object_type={'event_location'}
                    object_id={$lq__event_location_obj?.event_location_id}
                    field_name={'name'}
                    field_type={'text'}
                    current_value={$lq__event_location_obj?.name}
                    display_block={true}
                    on_success={() =>
                        events_func.load_ae_obj_id__event_location({
                            api_cfg: $ae_api,
                            event_location_id:
                                $lq__event_location_obj?.event_location_id,
                            log_lvl: 1
                        })}>
                    <strong class="text-sm">Name (room or area):</strong>
                    {$lq__event_location_obj.name}
                </Element_ae_obj_field_editor>

                {#if !pres_mgmt_loc.current.hide__location_code}
                    <Element_ae_obj_field_editor
                        object_type={'event_location'}
                        object_id={$lq__event_location_obj?.event_location_id}
                        field_name={'code'}
                        field_type={'text'}
                        current_value={$lq__event_location_obj?.code}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_location({
                                api_cfg: $ae_api,
                                event_location_id:
                                    $lq__event_location_obj?.event_location_id,
                                log_lvl: 1
                            })}>
                        <span
                            class="preset-tonal-warning rounded-md px-2 py-0.5 text-xs leading-none"
                            title="Location code {$lq__event_location_obj.code}">
                            <strong class="text-sm">code:</strong>
                            <Barcode size="1em" />
                            {$lq__event_location_obj.code}
                        </span>
                    </Element_ae_obj_field_editor>
                {/if}

                <a
                    data-sveltekit-preload-data="false"
                    href="/events/{$lq__event_location_obj?.event_id}/launcher/{$lq__event_location_obj?.event_location_id}"
                    class:hidden={hide__launcher_link}
                    class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500"
                    title="Launcher: {$lq__event_location_obj?.name} {$lq__event_location_obj?.event_location_id}">
                    <Plane size="1em" class="m-1" />
                    <!-- {@html $lq__event_location_obj?.name ? $lq__event_location_obj?.name : ae_snip.html__not_set} -->
                </a>
            </li>

            {#if $ae_loc.administrator_access}
                <li>
                    <strong class="text-sm">Location passcode:</strong>
                    <Key size="1em" />
                    {@html $lq__event_location_obj.passcode
                        ? $lq__event_location_obj.passcode
                        : ae_snip.html__not_set}
                    <Element_ae_obj_field_editor
                        object_type={'event_location'}
                        object_id={$lq__event_location_obj?.event_location_id}
                        field_name={'passcode'}
                        field_type={'text'}
                        current_value={$lq__event_location_obj?.passcode}
                        allow_null={true}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_location({
                                api_cfg: $ae_api,
                                event_location_id:
                                    $lq__event_location_obj?.event_location_id,
                                log_lvl: 1
                            })} />
                </li>
            {/if}

            <li>
                <div>
                    <Element_ae_obj_field_editor
                        object_type={'event_location'}
                        object_id={$lq__event_location_obj?.event_location_id}
                        field_name={'description'}
                        field_type={'textarea'}
                        current_value={$lq__event_location_obj.description}
                        allow_null={true}
                        display_block={true}
                        textarea_rows={15}
                        on_success={() =>
                            events_func.load_ae_obj_id__event_location({
                                api_cfg: $ae_api,
                                event_location_id:
                                    $lq__event_location_obj?.event_location_id,
                                log_lvl: 1
                            })}>
                        <strong class="text-sm"> Location description: </strong>

                        {#if $lq__event_location_obj.description}
                            <button
                                type="button"
                                onclick={() => {
                                    console.log('Show/Hide Description');
                                    pres_mgmt_loc.current.show_content__location_description =
                                        !pres_mgmt_loc.current.show_content__location_description;
                                }}
                                class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs">
                                {#if pres_mgmt_loc.current.show_content__location_description}
                                    <EyeOff size="1em" class="mx-1" />
                                    <span>Hide Description</span>
                                {:else}
                                    <Eye size="1em" class="mx-1" />
                                    <span>Show</span>
                                {/if}
                            </button>

                            <pre
                                class="bg-surface-100-900 rounded-lg p-3 text-sm whitespace-pre-wrap"
                                class:hidden={!pres_mgmt_loc.current.show_content__location_description}>{$lq__event_location_obj.description}</pre>
                        {:else}
                            {@html ae_snip.html__not_set}
                        {/if}
                    </Element_ae_obj_field_editor>
                </div>
            </li>
        </ul>

        <div class="m-1 flex flex-col flex-wrap items-center gap-1">
            {#if $ae_loc.trusted_access}
                <!-- Message if they have agreed -->
                <Element_data_store
                    ds_code="events__pres_mgmt__location_page_authorized_info"
                    ds_name="Default: Events - Pres Mgmt Location Authorized Info"
                    ds_type="html"
                    for_type="event"
                    for_id={$lq__event_presentation_obj?.event_id}
                    class_li="w-fit max-w-(--breakpoint-lg) flex flex-col gap-1"
                    show_edit={false}
                    show_edit_btn={true} />
            {:else}
                Not authorized
            {/if}
        </div>
    </section>
{/if}
