/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4 | Other=5
- ContentType: None=0 | Normal=1 | Photo=2 | Video=3 | Graphic=4 | Document=5 | Reaction=6 (Poll,Quiz) | Other=7
- Type: None=0 | Editorial=1 | General=2 | Reportage=3 | Interview=4 | Survey=5 | Tutorial=6 | Podcast=7 | Broadcast=8 | TalkShow=9 | LiveStream=10 | Translation=11 | Promotion=12 | Other=13
*/

<script setup lang="ts">
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";

const route = useRoute();

const store = reactive({
  dynamicPage: useDynamicPageStore(),
  article: useArticleStore(),
});

import { useDynamicPageStore } from '~/stores/dynamic-page';
import { useArticleStore } from '~/stores/articles';

const loadPage = async () => {
const article = await store.article.getArticleBySlug(String(route.params.slug));
  let isContentType 
  switch (article.value?.contentType) {
    case 1:
      isContentType = 'trang-chi-tiet';
      break;
    case 2:
      isContentType = 'trang-image';
      break;
    case 3:
      isContentType = 'trang-chi-tiet';
      break;
    case 4:
      isContentType = 'trang-chi-tiet';
      break;
    case 5:
      if (article.value?.layoutType === 4) {
        isContentType = 'trang-emagazine';
        break;
      }
      if (article.value?.layoutType === 3) {
        isContentType = 'trang-inforgraphic';
        break;
      }
    default:
      isContentType = 'trang-chi-tiet';
      break;
  }
  const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);

  return {
    article,
    dynamicPage
  };
};

const { data } = await useAsyncData('detail-article', () => loadPage());
const article = data.value?.article;
const dynamicPage = data.value?.dynamicPage;

const asycnCurrentPage = dynamicPage?.currentPage;
const asycnSectionPublished = dynamicPage?.sectionPublished;
const asycnComponentPublished = dynamicPage?.componentPublished;

useSeoMeta({
  title: () => article?.title.replace(/<[^>]+>/g, ''),
  description: () => article?.intro.replace(/<[^>]+>/g, ''),
  ogTitle: () => article?.title.replace(/<[^>]+>/g, ''),
  ogImage: () => article?.thumbnail,
  ogDescription: () => article?.intro.replace(/<[^>]+>/g, ''),
  twitterCard: () => 'summary_large_image',
})
</script>

<template>
  <main class="h-screen" v-if="asycnCurrentPage">
    <DynamicTemplate :page="asycnCurrentPage" :settings="asycnCurrentPage.settings">
        <DynamicSection
          v-for="(section, index) in asycnSectionPublished"
          :key="index"
          :settings="section.settings"
          :content="section.content ? JSON.parse(section.content) : null"
          :section="section"
        />
    </DynamicTemplate>
  </main>
</template>