<template>
  <ClientOnly>
    <TopMenu @changetab="changeTab" />
    <div class="container blockdiv has-text-text-20">
      <div class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1" v-if="tab">
        <template v-if="subtab">
          <span class="fs-17 font-semibold">{{ tab[$store.lang] }}</span>
          <SvgIcon class="mx-2" v-bind="{ name: 'right.svg', size: 17, type: 'has-text-black' }"></SvgIcon>
          <span class="fs-17 font-semibold">{{ subtab[$store.lang] }}</span>
        </template>
        <div v-else>
          <div class="is-flex is-gap-1 is-align-items-center mb-1">
            <p class="fs-17 font-semibold">{{ tab[$store.lang] }}</p>
            <button
              @click="refresh"
              class="button is-primary is-light rounded-full p-1"
            >
              <Icon name="material-symbols:refresh-rounded" :size="20" />
            </button>
          </div>
          <p class="has-text-grey fs-13 font-normal">Cập nhật: 
            <NuxtTime
              :datetime="Date.now() - 1000 * 60 * Math.random() * 10"
              locale="vi-VN"
              relative
            />
          </p>
        </div>
        <div id="header-right-slot">
        </div>
      </div>
      <KeepAlive>
        <component :is="componentMap[vbind.component]" v-bind="vbind" :key="componentKey" v-if="componentKey" />
      </KeepAlive>
    </div>
  </ClientOnly>
</template>
<script setup>
const { $createMeta, $store, $copy, $id } = useNuxtApp();
const componentMap = {};
const componentKey = ref();
var vbind = {};
var tab, subtab, currentTab;
const toPascalCase = (str) => {
  if (!str || typeof str !== 'string') return str;
  return str
    .split('/')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join('');
};
function changeTab(_tab, _subtab) {
  tab = _tab;
  subtab = _subtab;
  currentTab = subtab || tab;
  if (currentTab.detail) {
    vbind = $store.lang === "en" ? currentTab.detail_en || currentTab.detail : currentTab.detail;
  }
  componentMap[vbind.component] = vbind.base || toPascalCase(vbind.component);
  componentKey.value = vbind.component;
  $store.commit("tabinfo", { tab, subtab, current: currentTab, vbind });
  let meta = {
    title: currentTab[$store.lang],
    image: undefined,
    description: "Utopia",
    type: "article",
    keywords: "utopia",
  };
  useHead($createMeta(meta));
}
function refresh() {
  const copy = $copy(componentKey.value) + $id()
  componentKey.value = undefined
  setTimeout(()=>componentKey.value = copy)
}
</script>
