<script setup lang="ts">
import { enumPageComponentTemplates, enumPageComponentLayouts } from "@/definitions/enum";
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage } = storeToRefs(useDynamicPageStore());
const props = defineProps<{
  type: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
}>();

// const store = reactive({
//   page: useCmsPageStore(),
//   section: usePageSectionStore(),
//   component: usePageComponentStore(),
// });

// const { currentPage } = storeToRefs(useCmsPageStore());

const defineTypeRecusive = {
  TOP_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-TOP'],
  BOTTOM_NAVIGATION: enumPageComponentLayouts[enumPageComponentTemplates.NAVIGATION]['NAVIGATION-BOTTOM'],
};

const findDataPosition = computed(() => {
  let result = {};
  switch (props.type) {
    case defineTypeRecusive.TOP_NAVIGATION:
      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
        return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
      });
      console.log(result)
      break;
    case defineTypeRecusive.BOTTOM_NAVIGATION:
      result = currentPage.value.components && currentPage.value.components.find((component: any) => {
        return component.settings && component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.BOTTOM_NAVIGATION
      });
      break;
    default:
      result = {};
      break;
  }
  return result;
});

console.log(findDataPosition, 'findDataPosition')
</script>

<template>
  <div>
      <DynamicComponent 
        v-if="findDataPosition && findDataPosition?.id" 
        :settings="findDataPosition?.settings" 
        :component="findDataPosition"
        :content="findDataPosition?.content"
      />
      <div v-else class="text-center">
        <span>Hãy tạo thành phần "Thanh điều hướng ở đầu trang" để hiển thị thành điều hướng tại đây</span>
      </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
