<template>
  <NuxtLayout name="default">
    <NotFound v-if="data.length == 0" />
    <ContentBuilder v-else class="min-h-[calc(100vh-9rem)] w-full" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import type Page from "../types/collection/page";
import type Global from "../types/single/global";

const {
  params: { slug: params },
} = useRoute();
const baseUrl = useStrapiUrl().replace("/api", "");
const { findOne } = useStrapi();

const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const {
  navbar: { navbar_items },
} = global.value?.data as unknown as Global;

const navbar_sub_items = computed(() => {
  return navbar_items.find((ni) => ni.URL == params[0])?.navbar_sub_items ?? [];
});

const active_item = computed(() => {
  return navbar_items.find((ni) => ni.URL == params[0])?.page;
});
const active_sub_item = computed(() => {
  return navbar_sub_items.value.find((si) => si.URL == params[1])?.page;
});
const active_page_id = computed<string>(() => {
  return active_sub_item.value?.slug ?? active_item.value?.slug ?? "";
});

const { data: pages } = await useAsyncData("pages", () =>
  findOne<Array<Page>>("pages", {
    populate: "*",
    filters: { slug: active_page_id.value },
  })
);
const data = pages.value?.data as unknown as Array<Page>;
</script>
