<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';

import { ae, Element_modal_v3 } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';

// import Edit_archive_content_obj from './10_edit__archive_content_obj.svelte';
import List_archive_content_obj from './10_list__archive_content_obj.svelte';

const dispatch = createEventDispatcher();

if ($slct.archive_id) {
    console.log(`Archive ID selected: ${$slct.archive_id}`);
    console.log(`Archive Object selected: ${$slct.archive_obj}`)

    $slct_trigger = 'load__archive_obj';
    $slct_trigger = 'load__archive_content_obj_li';

    // Auto show the selected Archive ID
    // Set the URL param "archive_id" to the current Archive ID. This is a just in case.
    const url = new URL(location);
    url.searchParams.set('archive_id', $slct.archive_id);
    history.pushState({}, '', url);

    // $ae_app.archives.show_main__options = true;
    $ae_app.archives.show_list__archive_obj_li = false;
    $ae_app.archives.show_edit__archive_obj = false;
    $ae_app.archives.show_view__archive_obj = true;
}

onMount(() => {
    console.log('** Component Mounted: ** View - Archive Obj');
});

function handle_archive_content_obj_created(event) {
    console.log('*** handle_archive_content_obj_created() ***');
    console.log(event.detail);

    $slct.archive_content_id = null;
    $slct.archive_content_obj = {};

    $slct_trigger = 'load__archive_obj_li';
    $slct_trigger = 'load__archive_obj';
    $slct_trigger = 'load__archive_content_obj_li';

    // $ae_app.archives.show_list__archive_obj_li = false;
    // $ae_app.archives.show_edit__archive_obj = false;
    // $ae_app.archives.show_view__archive_obj = true;
    $ae_app.archives.show_edit__archive_content_id = false;
}
function handle_archive_content_obj_updated(event) {
    console.log('*** handle_archive_content_obj_updated() ***');
    console.log(event.detail);

    $slct_trigger = 'load__archive_obj';
    $slct_trigger = 'load__archive_content_obj_li';

    // $ae_app.archives.show_list__archive_obj_li = false;
    // $ae_app.archives.show_edit__archive_obj = false;
    // $ae_app.archives.show_view__archive_obj = true;
    $ae_app.archives.show_edit__archive_content_id = false;
}
function handle_archive_content_obj_deleted(event) {
    console.log('*** handle_archive_content_obj_deleted() ***');
    console.log(event.detail);

    $slct_trigger = 'load__archive_obj_li';
    $slct_trigger = 'load__archive_obj';
    $slct_trigger = 'load__archive_content_obj_li';

    // $ae_app.archives.show_list__archive_obj_li = false;
    // $ae_app.archives.show_edit__archive_obj = false;
    // $ae_app.archives.show_view__archive_obj = true;
    $ae_app.archives.show_edit__archive_content_id = false;
}
</script>


<section class="svelte_component ae_section ae_view archive_obj view__archive_obj" bind:clientHeight={$ae_app.iframe_height_modal_body}>

<header class="ae_header archive__header">
    <h2 class="archive__name">{@html $slct.archive_obj.name}</h2>
</header>

<section class="archive__content">
    {#if $slct.archive_obj.description}<div class="ae_value archive__description">{@html $slct.archive_obj.description}</div>{/if}
    {#if $slct.archive_obj.content_html}<div class="ae_value">{@html $slct.archive_obj.content_html}</div>{/if}
    {#if $slct.archive_obj.original_url}
        <div>
            <span class="ae_label">URL:</span>
            <span class="ae_value">{$slct.archive_obj.original_url}</span>
        </div>
    {/if}
    {#if $slct.archive_obj.original_datetime}
        <div class="archive__original_datetime">
            <span class="ae_label">Start Date:</span>
            <span class="ae_value">{ae.util.iso_datetime_formatter($slct.archive_obj.original_datetime, 'datetime_long')}</span>
        </div>
    {/if}
    {#if $slct.archive_obj.original_timezone}
        <span class="ae_label">Timezone:</span>
        <span class="ae_value">{$slct.archive_obj.original_timezone}</span>
    {/if}
    {#if $slct.archive_obj.original_location}
        <div>
            <span class="ae_label">Location:</span>
            <span class="ae_value">{$slct.archive_obj.original_location}</span>
        </div>
    {/if}
</section>

<section
    class="ae_section ae_meta archive__meta"
    class:ae_d_none={!$ae_app.administrator_access}
    >
    <div class="ae_group">
        <div class="archive__created_on_updated_on">
            <span class="ae_label">Created on:</span>
            <span class="ae_value archive__created_on">{ae.util.iso_datetime_formatter($slct.archive_obj.created_on, 'datetime_iso_no_seconds')}</span>
            {#if $slct.archive_obj.updated_on}
                <span class="ae_label">Updated on:</span>
                <span class="ae_value">{ae.util.iso_datetime_formatter($slct.archive_obj.updated_on, 'datetime_iso_no_seconds')}</span>
            {/if}
        </div>
    </div>

    {#if $ae_app.trusted_access}
    <div class="ae_options">
        {#if $ae_app.trusted_access || $slct.archive_obj.external_person_id === $ae_app.novi_uuid}
        <button
            on:click={() => {
                $slct.archive_content_id = null;
                $slct.archive_content_obj = {};
                $ae_app.archives.show_edit__archive_content_id = true;
            }}
            class="ae_btn ae_smallest btn btn-warning"
            title={`Add content for: ${$slct.archive_obj.name}`}
            >
            <span class="fas fa-plus"></span> Add Content
        </button>

        <button
            on:click={() => {
                // $slct.archive_id = $slct.archive_obj.archive_id_random;
                // $slct.archive_obj = $slct.archive_obj;

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

                // $ae_app.archives.show_main__options = false;
                // $ae_app.archives.show_list__archive_obj_li = false;
                $ae_app.archives.show_view__archive_obj = false;
                $ae_app.archives.show_edit__archive_obj = true;
            }}
            class="ae_btn ae_smallest btn btn-xs btn-warning"
            title={`Edit archive: ${$slct.archive_obj.name}`}
            >
            <span class="fas fa-edit"></span> Edit Archive
        </button>
        {/if}
    </div>
    {/if}
</section>

{#if $slct.archive_obj}
<!-- {#each $slct.archive_content_obj_li as idaa_archive_content_obj, index} -->
    <List_archive_content_obj />
<!-- {/each} -->
{/if}



<!-- {#if $slct.archive_content_obj_li && $slct.archive_content_obj_li.length} -->
<!-- {#each $slct.archive_content_obj_li as idaa_archive_content_obj, index}
<hr />
<span class="archive_content__name">{idaa_archive_content_obj.name}</span>
<pre class="archive_content__content">{@html idaa_archive_content_obj.content}</pre>

<section class="ae_section ae_meta archive_content__meta">
    <div class="ae_group">
        <div class="archive_content__created_on_updated_on">
            Created on:
            <span class="archive_content__created_on">{ae.util.iso_datetime_formatter(idaa_archive_content_obj.created_on, 'datetime_iso_no_seconds')}
            {#if idaa_archive_content_obj.updated_on}
                Updated on:
                {ae.util.iso_datetime_formatter(idaa_archive_content_obj.updated_on, 'datetime_iso_no_seconds')}
            {/if}
        </div>
    </div>

    {#if $ae_app.trusted_access || idaa_archive_content_obj.external_person_id === $ae_app.novi_uuid}
    <div class="ae_options">
        <button on:click={() => {
                $slct.archive_content_id = idaa_archive_content_obj.archive_content_id_random;
                $slct.archive_content_obj = idaa_archive_content_obj;

                // $ae_app.archives.show_archive_content_list = false;
                $ae_app.archives.show_edit__archive_content_id = true;
                // $ae_app.archives.show_view__archive_obj = false;
            }}
            class="btn btn-default"
            >
            <span class="fas fa-edit"></span> Edit Content
        </button>
    </div>
    {/if}
</section>

{/each} -->
<!-- {/if} -->

</section>


<style>
.ae_label {
    font-size: smaller;
}
.ae_value {
    font-weight: bold;
}

.archive_obj .ae_meta {
    flex-direction: column;
    /* justify-content: space-between; */
}

.archive_obj .ae_meta .ae_group {
    flex-direction: row;
}

.archive_obj .ae_meta .ae_options {
    flex-direction: row;
    justify-content: space-between;
}

.archive__created_on_updated_on, .archive_content__created_on_updated_on {
    /* font-size: smaller; */
    /* background-color: hsla(0,80%,50%,1); */
    /* color: hsla(0,0%,50%,1); */
}
</style>
