<script lang="ts">
// *** Import Svelte specific

// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import {
    idaa_loc,
    idaa_sess,
    idaa_slct,
    idaa_trig,
    idaa_prom
} from '$lib/stores/ae_idaa_stores';
// import { archives_func } from '$lib/ae_archives/ae_archives_functions';

interface Props {
    log_lvl?: number;
    lq__archive_obj: any;
    lq__archive_content_obj_li: any;
}

let {
    log_lvl = 0,
    lq__archive_obj,
    lq__archive_content_obj_li
}: Props = $props();

// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_trigger: any = null;
// let ae_triggers: key_val = {};

// Reminder: Styling is being done with Tailwind CSS, not Bootstrap.
</script>

<div
    class="svelte_component ae_section ae_view archive_obj view__archive_obj m-2 flex flex-col flex-wrap items-center justify-center gap-2 rounded-lg bg-white"
    bind:clientHeight={$ae_loc.iframe_height_modal_body}>
    <!-- <header class="ae_header archive__header">
    <h2 class="archive__name h3">
        {@html $lq__archive_obj?.name ?? 'Loading...'}
        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
            ({$lq__archive_content_obj_li?.length ?? '0'}×)
        {/if}
        {#await $idaa_prom.load__archive_content_obj_li}
            <span class="fas fa-spinner fa-spin"></span>
        {:then}

        {/await}
    </h2>
</header> -->

    <div class="archive__content w-2xl">
        {#if $lq__archive_obj?.description}<div
                class="ae_value archive__description">
                {@html $lq__archive_obj?.description}
            </div>{/if}
        {#if $lq__archive_obj?.content_html}<div class="ae_value">
                {@html $lq__archive_obj?.content_html}
            </div>{/if}
        {#if $lq__archive_obj?.original_url}
            <div>
                <span class="ae_label text-sm">URL:</span>
                <span class="ae_value font-semibold"
                    >{$lq__archive_obj?.original_url}</span>
            </div>
        {/if}
        {#if $lq__archive_obj?.original_datetime}
            <div class="archive__original_datetime">
                <span class="ae_label text-sm">Start Date:</span>
                <span class="ae_value font-semibold"
                    >{ae_util.iso_datetime_formatter(
                        $lq__archive_obj?.original_datetime,
                        'date_long'
                    )}</span>
            </div>
        {/if}
        {#if $lq__archive_obj?.original_timezone}
            <span class="ae_label text-sm">Timezone:</span>
            <span class="ae_value font-semibold"
                >{$lq__archive_obj?.original_timezone}</span>
        {/if}
        {#if $lq__archive_obj?.original_location}
            <div>
                <span class="ae_label text-sm">Location:</span>
                <span class="ae_value font-semibold"
                    >{$lq__archive_obj?.original_location}</span>
            </div>
        {/if}
    </div>

    <div
        class="ae_meta archive__meta mt-2 flex flex-col items-center justify-center gap-2"
        class:hidden={!$ae_loc.trusted_access}>
        <div
            class="ae_group flex flex-col items-center justify-center gap-1 text-sm text-gray-500 sm:flex-row">
            <span class:hidden={!$ae_loc.administrator_access}>
                <span class="ae_label">Created on:</span>
                <span class="ae_value archive__created_on"
                    >{ae_util.iso_datetime_formatter(
                        $lq__archive_obj?.created_on,
                        'datetime_iso_12_no_seconds'
                    )}</span>
            </span>
            {#if $lq__archive_obj?.updated_on}
                <span>
                    <span class="ae_label">Updated on:</span>
                    <span class="ae_value"
                        >{ae_util.iso_datetime_formatter(
                            $lq__archive_obj?.updated_on,
                            'datetime_iso_12_no_seconds'
                        )}</span>
                </span>
            {/if}
        </div>

        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
            <div
                class="ae_section ae_options filters_and_search my-2 flex flex-col items-center justify-center gap-1 rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-700 dark:bg-gray-800">
                <span class="flex flex-row items-center justify-around gap-1">
                    {#if $ae_loc.edit_mode && $ae_loc.trusted_access && (!$idaa_loc.archives.qry__hidden || $idaa_loc.archives.qry__hidden == 'not_hidden')}
                        <button
                            type="button"
                            onclick={() => {
                                $idaa_loc.archives.qry__enabled = 'enabled';
                                $idaa_loc.archives.qry__hidden = 'all';
                                $idaa_loc.archives.qry__limit = 250;
                                // ae_trigger = 'load__event_obj_li';
                                $idaa_trig.archive_content_li = true;
                            }}
                            class="novi_btn btn_show_archives_archive_content ae_btn btn btn-info btn-sm preset-tonal-secondary border-secondary-500 border">
                            <span class="fas fa-eye m-1"></span> Show Hidden Content
                        </button>
                    {:else if $ae_loc.trusted_access && $idaa_loc.archives.qry__hidden != 'not_hidden'}
                        <button
                            type="button"
                            onclick={() => {
                                $idaa_loc.archives.qry__enabled = 'enabled';
                                $idaa_loc.archives.qry__hidden = 'not_hidden';
                                $idaa_loc.archives.qry__limit = 250;
                                // ae_trigger = 'load__event_obj_li';
                                $idaa_trig.archive_content_li = true;
                            }}
                            class="novi_btn btn_hide_archives_archive_content ae_btn btn btn-info btn-sm preset-tonal-secondary border-secondary-500 border">
                            <span class="fas fa-eye-slash m-1"></span> Hide Hidden
                            Content
                        </button>
                    {/if}

                    {#if $ae_loc.edit_mode && $ae_loc.manager_access && (!$idaa_loc.archives.qry__enabled || $idaa_loc.archives.qry__enabled == 'enabled')}
                        <button
                            type="button"
                            onclick={() => {
                                $idaa_loc.archives.qry__enabled = 'all';
                                $idaa_loc.archives.qry__hidden = 'all';
                                $idaa_loc.archives.qry__limit = 500;
                                // ae_trigger = 'load__event_obj_li';
                                $idaa_trig.archive_content_li = true;
                            }}
                            class="novi_btn btn_show_archive_content ae_btn btn btn-warning btn-sm preset-tonal-secondary border-secondary-500 border">
                            <span class="fas fa-eye m-1"></span> Show Disabled Events
                        </button>
                    {:else if $ae_loc.edit_mode && $ae_loc.manager_access && $idaa_loc.archives.qry__enabled != 'enabled'}
                        <button
                            type="button"
                            onclick={() => {
                                $idaa_loc.archives.qry__enabled = 'enabled';
                                $idaa_loc.archives.qry__hidden = 'all';
                                $idaa_loc.archives.qry__limit = 500;
                                $idaa_trig.archive_content_li = true;
                                // ae_trigger = 'load__event_obj_li';
                            }}
                            class="novi_btn btn_hide_bb_post ae_btn btn btn-warning btn-sm preset-tonal-secondary border-secondary-500 border">
                            <span class="fas fa-eye-slash m-1"></span> Hide Disabled
                            Events
                        </button>
                    {/if}
                </span>

                <div class="ae_options">
                    <!-- {#if $ae_loc.trusted_access} -->
                    <button
                        type="button"
                        disabled={!$ae_loc.trusted_access}
                        onclick={() => {
                            if (!confirm('Add new archive content?')) {
                                return false;
                            }
                            $idaa_slct.archive_content_id = null;
                            $idaa_slct.archive_content_obj = {};

                            $idaa_sess.archives.show__modal_view__archive_content_id = false;
                            $idaa_sess.archives.show__modal_edit__archive_content_id = true;
                        }}
                        class="novi_btn btn btn-sm preset-tonal-warning"
                        title={`Add content for: ${$lq__archive_obj?.name}`}>
                        <span class="fas fa-plus m-1"></span> Add Content
                    </button>

                    <button
                        type="button"
                        disabled={!$ae_loc.trusted_access}
                        onclick={() => {
                            // $idaa_slct.archive_id = $lq__archive_obj?.archive_id_random;
                            // $lq__archive_obj? = $lq__archive_obj?;

                            $idaa_slct.archive_obj = $lq__archive_obj;

                            // const url = new URL(location);
                            // url.searchParams.set('archive_id', $lq__archive_obj?.archive_id_random);
                            // history.pushState({}, '', url);

                            // $idaa_sess.archives.show_main__options = false;
                            // $idaa_sess.archives.show_list__archive_obj_li = false;
                            $idaa_sess.archives.show__modal_view__archive_id = false;
                            $idaa_sess.archives.show__modal_edit__archive_id =
                                $idaa_slct.archive_id;
                        }}
                        class="novi_btn btn btn-sm preset-tonal-warning"
                        title={`Edit archive: ${$lq__archive_obj?.name}`}>
                        <span class="fas fa-edit m-1"></span> Edit Archive
                    </button>
                    <!-- {/if} -->
                </div>
            </div>
        {/if}
    </div>
</div>
