<script lang="ts">
/** @type {import('./$types').PageData} */
export let data: any;
let log_lvl = 0;

// Imports
import { Modal } from 'flowbite-svelte';
import { onMount } from 'svelte';

import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import Element_data_store from '$lib/element_data_store_v2.svelte';

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

import { liveQuery } from "dexie";
import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_archives } from "$lib/db_archives";
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct, idaa_trigger } from '$lib/ae_idaa_stores';
import { archives_func } from '$lib/ae_archives/ae_archives_functions';

import Archive_obj_id_edit from './ae_idaa_comp__archive_obj_id_edit.svelte';
import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
// import Archive_page_menu from './session_page_menu.svelte';

import Archive_content_obj_li from './ae_idaa_comp__archive_content_obj_li.svelte';
import Archive_content_obj_id_edit from './ae_idaa_comp__archive_content_obj_id_edit.svelte';

import { browser } from '$app/environment';

// Variables


// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
console.log(`ae_acct = `, ae_acct);

// For some reason data.params.archive_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
$idaa_slct.archive_id = ae_acct.slct.archive_id;
// $idaa_slct.archive_obj = ae_acct.slct.archive_obj;


$: lq__archive_obj = liveQuery(async () => {
    console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
    let results = await db_archives.archive
        .get($idaa_slct?.archive_id);

    return results;
});

$: lq__archive_content_obj_li = liveQuery(async () => {
    let results = await db_archives.content
        .where('archive_id')
        .equals($idaa_slct?.archive_id)
        .reverse()
        .sortBy('updated_on');
        // .sortBy('title');

    return results;
});

$: lq__archive_content_obj = liveQuery(async () => {
    let results = await db_archives.content
        .get($idaa_slct.archive_content_id);

    return results;
});



if (browser) {
    console.log('Browser environment detected.');
}


</script>


<section
    class="
        ae_idaa__bb
        container h-full mx-auto
        flex flex-col gap-1
        py-1 px-2 pb-16
        items-center
        min-w-full
        max-w-max
        "
    >

<!-- <h1>Archives {$lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h1> -->

<Archive_view
    lq__archive_obj={lq__archive_obj}
    lq__archive_content_obj_li={lq__archive_content_obj_li}
    />

<!-- {#if $lq__archive_content_obj_li && $lq__archive_content_obj_li?.length } -->
    <Archive_content_obj_li
        lq__archive_content_obj_li={lq__archive_content_obj_li}
        />
<!-- {:else} -->
    <!-- <p>No archive content available to show.</p> -->
<!-- {/if} -->


</section>


<!-- Modal: Archive edit ID -->
<Modal
    title="{$lq__archive_obj?.name} - {$lq__archive_obj?.id}"
    bind:open={$idaa_sess.archives.show__modal_edit__archive_id}
    autoclose={false}
    placement="top-center"
    size="xl"
    class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
    >

    <svelte:fragment slot="header">
        <div class="flex flex-row items-center justify-between w-full">
            <h3 class="text-lg font-semibold">
            {#if $ae_loc.trusted_access}
            <!-- <div class="ae_options"> -->
                <button
                    on:click={() => {
                        // const url = new URL(location);
                        // url.searchParams.set('event_id', $lq__archive_obj?.event_id_random);
                        // history.pushState({}, '', url);

                        $idaa_sess.archives.show__modal_view__archive_id = $idaa_slct.archive_id;
                        $idaa_sess.archives.show__modal_edit__archive_id = false;
                    }}
                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
                    title={`View meeting: ${$lq__archive_obj?.name}`}
                    >
                    <span class="fas fa-eye m-1"></span> View
                </button>
            <!-- </div> -->
            {/if}

            Edit Archive: {$lq__archive_obj?.name}</h3>
        </div>

    </svelte:fragment>

    <Archive_obj_id_edit
        lq__archive_obj={lq__archive_obj}
        />


    <!-- <svelte:fragment slot="footer">
        <div class="text-center w-full">
            <button
                type="button"
                on:click={() => {
                    console.log('Close modal');
                    $idaa_sess.recovery_meetings.show__modal_edit__archive_id = false;
                }}
                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
                >
                <span class="fas fa-times mx-1"></span>
                Close
            </button>
        </div>
    </svelte:fragment> -->

</Modal>


<!-- Modal: Archive Content edit ID -->
<Modal
    title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.id}"
    bind:open={$idaa_sess.archives.show__modal_edit__archive_content_id}
    autoclose={false}
    placement="top-center"
    size="xl"
    class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
    >

    <svelte:fragment slot="header">
        <div class="flex flex-row items-center justify-between w-full">
            <h3 class="text-lg font-semibold">
            {#if $ae_loc.trusted_access}
            <!-- <div class="ae_options"> -->
                <button
                    on:click={() => {
                        // const url = new URL(location);
                        // url.searchParams.set('event_id', $lq__archive_content_obj?.event_id_random);
                        // history.pushState({}, '', url);

                        $idaa_sess.archives.show__modal_view__archive_content_id = $idaa_slct.archive_content_id;
                        $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                    }}
                    class="btn btn-sm variant-ghost-warning hover:variant-filled-warning transition"
                    title={`View meeting: ${$lq__archive_content_obj?.name}`}
                    >
                    <span class="fas fa-eye m-1"></span> View
                </button>
            <!-- </div> -->
            {/if}

            Edit Archive Content: {$lq__archive_content_obj?.name}</h3>
        </div>

    </svelte:fragment>

    <Archive_content_obj_id_edit
        lq__archive_content_obj={lq__archive_content_obj}
        />


    <!-- <svelte:fragment slot="footer">
        <div class="text-center w-full">
            <button
                type="button"
                on:click={() => {
                    console.log('Close modal');
                    $idaa_sess.recovery_meetings.show__modal_edit = false;
                }}
                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
                >
                <span class="fas fa-times mx-1"></span>
                Close
            </button>
        </div>
    </svelte:fragment> -->

</Modal>