<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"
      >
        <div>
          <div class="fs-17 font-semibold is-flex is-gap-1 is-align-items-center mb-1">
            <div
              v-if="subtab"
              class="is-flex is-gap-1 is-align-items-center"
            >
              <span>{{ tab[$store.lang] }}</span>
              <Icon
                name="material-symbols:arrow-forward-ios-rounded"
                :size="13"
                class="has-text-grey"
              />
              <span>{{ subtab[$store.lang] }}</span>
            </div>
            <p v-else>{{ 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"
          :key="componentKey"
        ></div>
      </div>
      <KeepAlive>
        <component
          v-if="componentKey"
          :is="componentMap[vbind.component]"
          :key="componentKey"
          v-bind="vbind"
        />
      </KeepAlive>
    </div>
  </ClientOnly>
</template>
<script setup>
useHead({
  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.svg" }],
  htmlAttrs: {
    class: "has-background-blue-100",
    style: "min-height: 100vh",
  },
});

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>
