<script setup lang="ts">
import _cloneDeep from 'lodash/cloneDeep';

import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());

const route = useRoute();
const store = reactive({
  dynamicPage: useDynamicPageStore(),
});

(async () => {
  try {
    store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', ''));
  } catch (error) {
    console.error("Error fetching data:", error);
  }
})();

watch(currentPage, () => {
  console.log(currentPage.value)
  store.dynamicPage.setSectionPublished();
  store.dynamicPage.setComponentPublished()
}, { deep: true })

useHead({
  title: 'Trang chủ'
})


</script>

<template>
  <main class="h-screen" v-if="currentPage">
    <DynamicTemplate :settings="currentPage.settings">
      <template v-if="sectionPublished && sectionPublished.length > 0">
        <DynamicSection
          v-for="(section, index) in sectionPublished"
          :key="index"
          :settings="section.settings"
          :content="section.content ? JSON.parse(section.content) : null"
          :section="section"
        />
      </template>
    </DynamicTemplate>
  </main>
</template>