<script lang="ts">
interface Props {
    lq__post_obj: any;
    lq__post_comment_obj_li: any;
    lq__post_comment_obj: any;
    log_lvl?: number;
}

let {
    lq__post_obj,
    lq__post_comment_obj_li,
    lq__post_comment_obj,
    log_lvl = 0
}: Props = $props();

// *** Import Svelte specific
import { browser } from '$app/environment';
// import { untrack } from 'svelte';

// *** Import Aether core variables and functions
// import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/ae_api/api';
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
} from '$lib/stores/ae_idaa_stores';

// import Comp__post_obj_id_edit from './ae_idaa_comp__post_obj_id_edit.svelte';
import Comp__post_comment_obj_id_edit from './ae_idaa_comp__post_comment_obj_id_edit.svelte';
import AE_Comp_Hosted_Files_Download_Button from '$lib/elements/ae_comp__hosted_files_download_button.svelte';

$effect(() => {
    if (browser && $lq__post_obj?.post_id) {
        document.body.scrollIntoView();
    }
});
</script>

<section
    bind:clientHeight={$ae_loc.iframe_height_modal_body}
    class="svelte_component ae_section ae_view post_obj view__post_obj w-full min-w-full space-y-2">
    <!-- <div class="post__header">
    <h2 class="post__title flex flex-row gap-2 items-center h3">
        <span class="">
            <span class="fas fa-comment-alt m-1"></span>
            {@html $lq__post_obj?.title ?? 'New Post'}
        </span>
        {#if $lq__post_obj?.topic_id}<span class="badge badge-info variant-glass-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if}
    </h2>
</div> -->

    <div class="post__content space-y-2">
        <!-- <pre class="post__content p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-normal whitespace-pre-wrap">{@html $lq__post_obj?.content}</pre> -->

        <div
            class="post__content reset_css w-full rounded-lg bg-white p-2 text-sm font-normal text-wrap shadow-md">
            {@html $lq__post_obj?.content}
        </div>

        {#if $lq__post_obj?.linked_li_json && $lq__post_obj?.linked_li_json.length}
            <div
                class="ae_section flex flex-row flex-wrap items-center justify-center gap-1">
                <span class="fas fa-paperclip"></span>
                <span class="text-sm text-gray-600 italic dark:text-gray-400"
                    >Linked files:</span>
                {#each $lq__post_obj.linked_li_json as linked_obj, index (linked_obj.hosted_file_id ?? index)}
                    {#if $ae_loc.authenticated_access}
                        {@const file_id =
                            linked_obj?.hosted_file_id || linked_obj?.id}
                        {#if file_id}
                            {@const ext = (
                                linked_obj.extension ||
                                linked_obj.file_extension ||
                                ae_util.guess_file_extension(
                                    linked_obj.filename
                                ) ||
                                ''
                            ).toLowerCase()}
                            {#if ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext)}
                                <div>
                                    <img
                                        src="{$ae_api.base_url}/v3/action/hosted_file/{file_id}/download?key={$ae_api.account_id}"
                                        alt={linked_obj.filename}
                                        class="h-fit w-fit min-w-96 rounded-lg object-cover shadow-md" />
                                </div>
                            {:else}
                                <AE_Comp_Hosted_Files_Download_Button
                                    hosted_file_id={file_id}
                                    hosted_file_obj={linked_obj}
                                    color="tertiary"
                                    variant="tonal"
                                    classes="border border-tertiary-500 hover:preset-filled-tertiary-500 min-w-48"
                                    max_filename={30} />
                            {/if}
                        {/if}
                    {/if}
                {/each}
            </div>
        {/if}
    </div>

    <section
        class="ae_section ae_meta post__meta mt-4 flex flex-row items-center justify-between gap-2 text-xs text-gray-500">
        <div class="ae_group flex flex-col gap-1">
            {#if $ae_loc.trusted_access && $lq__post_obj?.anonymous}
                <div class="post__posted_by">
                    Posted by: <span class="fas fa-user-secret"></span>
                    <span class="post__full_name">
                        {$lq__post_obj?.full_name}
                        *Anonymous*
                    </span>
                    {#if $ae_loc.trusted_access && $lq__post_obj?.email}
                        <a
                            href="mailto:{$lq__post_obj?.email}?subject=IDAA BB Post"
                            >{$lq__post_obj?.email}</a>
                    {/if}
                </div>
            {:else if $lq__post_obj?.anonymous}
                <div class="post__posted_by">
                    Posted by: <span class="fas fa-user-secret"></span>
                    <span class="post__full_name">Anonymous</span>
                </div>
            {:else if $lq__post_obj?.full_name}
                <div class="post__posted_by">
                    Posted by: <span class="fas fa-user"></span>
                    <span class="post__full_name"
                        >{$lq__post_obj?.full_name}</span>
                    {#if $ae_loc.trusted_access && $lq__post_obj?.email}
                        <a
                            href="mailto:{$lq__post_obj?.email}?subject=IDAA BB Post"
                            >{$lq__post_obj?.email}</a>
                    {/if}
                </div>
            {/if}

            {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                <div class="post__novi_id text-xs text-gray-500 dark:text-gray-400" style="overflow-wrap:anywhere;">
                    Novi ID: <span class="font-mono">{$lq__post_obj?.external_person_id ?? '-- not set --'}</span>
                </div>
            {/if}

            <div class="post__created_on_updated_on">
                {#if !$lq__post_obj?.updated_on}
                    <span class="ae_label">Created on:</span>
                    <span class="ae_value post__created_on"
                        >{ae_util.iso_datetime_formatter(
                            $lq__post_obj?.created_on,
                            'datetime_12_short'
                        )}</span>
                {:else}
                    <span class="ae_label">Updated on:</span>
                    <span class="ae_value post__updated_on">
                        {ae_util.iso_datetime_formatter(
                            $lq__post_obj?.updated_on,
                            'datetime_12_short'
                        )}</span>
                {/if}
                <span
                    class="post__archive_on"
                    class:hidden={!$ae_loc.administrator_access}>
                    <span class="ae_label">Archive on:</span>
                    <span class="ae_value"
                        >{ae_util.iso_datetime_formatter(
                            $lq__post_obj?.archive_on,
                            'datetime_12_short'
                        )}</span>
                </span>
            </div>
        </div>

        <div class="ae_options flex flex-row items-center gap-1">
            {#if $lq__post_obj?.post_comment_count}
                <span class="ae_badge ae_info post__post_comment_count">
                    <span class="fas fa-comment"></span>
                    {$lq__post_obj?.post_comment_count == 1
                        ? `${$lq__post_obj?.post_comment_count} comment`
                        : `${$lq__post_obj?.post_comment_count} comments`}
                </span>
            {/if}
            {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $idaa_loc.novi_uuid}
                <button
                    type="button"
                    onclick={() => {
                        $idaa_slct.post_comment_id = null;
                        $idaa_slct.post_comment_obj = {};
                        $idaa_sess.bb.show__inline_edit__post_comment_id = true;
                    }}
                    class="
                novi_btn btn-primary
                btn btn-md preset-tonal-secondary
                border-secondary-500 hover:preset-filled-secondary-500 border
                transition-all"
                    title={`New comment on: ${$lq__post_obj?.title}`}>
                    <span class="fas fa-plus m-1"></span> New Comment
                </button>
            {/if}

            {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || $lq__post_obj?.external_person_id === $idaa_loc.novi_uuid}
                <button
                    type="button"
                    onclick={() => {
                        // $idaa_slct.post_id = $idaa_slct.post_obj.post_id;
                        $idaa_slct.post_obj = $lq__post_obj; // In case things changed

                        // const url = new URL(location);
                        // url.searchParams.set('post_id', $idaa_slct.post_obj.post_id);
                        // history.pushState({}, '', url);

                        // $idaa_sess.bb.show_main__options = false;
                        // $idaa_sess.bb.show_list__post_li = false;
                        // $idaa_sess.bb.show_view__post_id = false;
                        // $idaa_sess.bb.show__inline_edit__post_obj = true;
                        $idaa_sess.bb.edit__post_obj = $idaa_slct.post_id;
                    }}
                    class="
                novi_btn
                btn btn-sm preset-tonal-warning
                hover:preset-filled-warning-500 transition
                "
                    title="Edit post for {$lq__post_obj?.full_name} (ID: {$lq__post_obj?.post_id}">
                    <span class="fas fa-edit m-1"></span> Edit Post
                </button>
            {/if}
        </div>
    </section>
    <!-- {/if} -->

    {#if $idaa_sess.bb.show__inline_edit__post_comment_id === true}
        <Comp__post_comment_obj_id_edit />
    {/if}

    {#if $lq__post_comment_obj_li?.length}
        <section class="post_comment_obj_li space-y-2 border border-y-0 p-0">
            {#each $lq__post_comment_obj_li as post_comment_obj, index (post_comment_obj.post_comment_id)}
                <div
                    class="space-y-1 border-b-2 p-4"
                    class:dim={post_comment_obj?.hide}
                    class:bg-warning-100={!post_comment_obj?.enable}>
                    {#if $idaa_sess.bb.show__inline_edit__post_comment_id == post_comment_obj.post_comment_id}
                        {$lq__post_comment_obj_li.length ?? 'unknown???'}
                        <Comp__post_comment_obj_id_edit />
                    {:else}
                        <div class="post_comment__content">
                            <pre
                                class="post_comment__content rounded-lg bg-white p-2 text-sm font-normal text-wrap whitespace-pre-wrap shadow-md">{@html post_comment_obj.content}</pre>
                        </div>

                        <section
                            class="ae_section ae_meta post_comment__meta mt-4 flex flex-row items-center justify-between gap-2 text-xs text-gray-500">
                            <div class="flex flex-col gap-1">
                                <span
                                    class="post_comment__posted_by comment_by_container">
                                    <span class="comment_by_lable"
                                        >Comment by:</span>
                                    {#if $ae_loc.trusted_access && post_comment_obj.anonymous}
                                        <span class="fas fa-user-secret"></span>
                                        <span
                                            class="comment_by_full_name anonymous"
                                            >
                                            {post_comment_obj.full_name}
                                            *Anonymous*
                                        </span>
                                        {#if $ae_loc.trusted_access && post_comment_obj?.email}
                                            <a
                                                href="mailto:{post_comment_obj?.email}?subject=IDAA BB Post Comment"
                                                >{post_comment_obj?.email}</a>
                                        {/if}
                                    {:else if post_comment_obj.anonymous}
                                        <span class="fas fa-user-secret"></span>
                                        <span
                                            class="comment_by_full_name anonymous"
                                            >Anonymous</span>
                                    {:else}
                                        <span class="fas fa-user"></span>
                                        <span class="comment_by_full_name"
                                            >{post_comment_obj.full_name}</span>
                                    {/if}
                                </span>

                                {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                                    <span class="post_comment__novi_id text-xs text-gray-500 dark:text-gray-400" style="overflow-wrap:anywhere;">
                                        Novi ID: <span class="font-mono">{post_comment_obj.external_person_id ?? '-- not set --'}</span>
                                    </span>
                                {/if}

                                <span
                                    class="post_comment__created_on_updated_on">
                                    {#if !post_comment_obj.updated_on || $ae_loc.edit_mode}
                                        <span class="ae_label"
                                            >Created on:</span>
                                        <span
                                            class="ae_value post_comment__created_on"
                                            >{ae_util.iso_datetime_formatter(
                                                post_comment_obj.created_on,
                                                'datetime_12_short'
                                            )}</span>
                                    {/if}
                                    {#if post_comment_obj.updated_on}
                                        <span class="ae_label"
                                            >Updated on:</span>
                                        <span
                                            class="ae_value post_comment__updated_on"
                                            >{ae_util.iso_datetime_formatter(
                                                post_comment_obj.updated_on,
                                                'datetime_12_short'
                                            )}</span>
                                    {/if}
                                </span>
                            </div>

                            {#if ($ae_loc.trusted_access && $ae_loc.edit_mode) || post_comment_obj.external_person_id === $idaa_loc.novi_uuid}
                                <div class="ae_options">
                                    <button
                                        type="button"
                                        onclick={() => {
                                            $idaa_slct.post_comment_id =
                                                post_comment_obj.post_comment_id;
                                            $idaa_slct.post_comment_obj =
                                                post_comment_obj;

                                            $idaa_sess.bb.show__inline_edit__post_comment_id =
                                                post_comment_obj.post_comment_id;
                                        }}
                                        class="
                    novi_btn
                    btn btn-sm preset-tonal-warning
                    hover:preset-filled-warning-500 transition"
                                        title="Edit comment by {post_comment_obj?.full_name} (for post ID {$lq__post_obj?.id})">
                                        <span class="fas fa-edit m-1"></span>
                                        Edit Comment
                                    </button>
                                </div>
                            {/if}
                        </section>
                    {/if}
                </div>
            {/each}
        </section>
    {/if}
</section>

<style lang="scss">
</style>
