<script setup lang="ts">
import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
import Topic from "@/components/article/Topic.vue";
import Event from "@/components/article/Event.vue";
import Tag from "@/components/article/Tag.vue";

const { currentArticle } = storeToRefs(useArticleStore());
const store = reactive({
  tag: useTagStore(),
  topic: useTopicStore(),
  event: useEventStore()
});

// const listTag = ref([]);
// const listTopic = ref([]);
// const listEvent = ref([])

// const getTagsAndTopicsAndEvents = async () => {
//   if (!currentArticle) return;
//   const fetchData = async (ids, fetchFn, list) => {
//     if (!ids) return;
//     const data = await Promise.all(ids.split(",").map(fetchFn));
//     if (data.length > 0) list.value = data;
//   };
//   await Promise.all([
//     fetchData(currentArticle.value.tagIds, store.tag.fetchById, listTag), 
//     fetchData(currentArticle.value.topicIds, store.topic.fetchById, listTopic),
//     fetchData(currentArticle.value.eventIds, store.event.fetchById, listEvent)
//   ]);
// };

// getTagsAndTopicsAndEvents();
</script>

<template>
  <div class="max-w-1500px mx-auto">
    <article class="w-full flex flex-col lg:flex-row gap-4 overflow-x-hidden mt-4 bg-#f7f7f7">
      <div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
        <div v-html="currentArticle?.detail" />
      </div>
      <div class="lg:w-[480px] overflow-y-auto lg:max-h-560px">
        <div class="w-full pt-6 pr-3">
          <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60"></h1>
          <h1 v-html="currentArticle?.title" class="text-2xl font-bold text-left sm:text-3xl xl:text-4xl" />
          <!-- <ArticleMeta class="!justify-start items-center gap-x-2" :authors="article?.authors" :createdOn="article?.createdOn" :createdBy="article?.createdBy" /> -->

          <div id="article-brief" class="mx-auto xl:max-w-6xl text-balance">
            <div v-html="currentArticle?.intro" class="font-semibold text-left" />
          </div>
          <!-- <section>
                <article class="mb-[1rem] py-[1rem] border-y-[1px] border-solid border-[#e0e0e0] flex items-center">
                  <iframe
                    :src="`https://www.facebook.com/plugins/like.php?href=${ORIGIN}/${category?.code}/${article?.code}&amp;width=160&amp;layout=button&amp;action=like&amp;size=small&amp;share=true&amp;height=65&amp;appId`"
                    width="140" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                    allowfullscreen="true"
                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
                </article>
              </section> -->
          <!-- <Topic :topics="listTopic" />
          <Event :events="listEvent" />
          <Tag :tags="listTag" /> -->
          <section id="comment-section" class="grid">
                <Comment :articleId="currentArticle?.articleId" />
            </section>
        </div>
      </div>
    </article>
    <div class="w-full border-t-2 border-dashed mt-4" />
  </div>
</template>
