<template>
  <header class="sticky top-0 h-fit z-50">
    <div
      primary
      class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
    >
      <NuxtLink to="/">
        <img v-if="logo" class="h-16" :src="baseUrl + logo.url" />
        <img v-else class="h-16" src="/favicon.png" />
      </NuxtLink>

      <div v-if="navbar" class="md:hidden">
        <svg
          v-if="!open"
          viewBox="0 0 24 24"
          class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
          @click="open = !open"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
        <svg
          v-else
          viewBox="0 0 24 24"
          class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
          @click="open = !open"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </div>

      <div
        v-if="navbar"
        class="w-fit max-w-full p-2.5 justify-center items-center gap-7 flex flex-col md:flex-row md:flex-wrap"
        :class="open ? 'max-md:absolute top-24 left-0 max-md:w-full bg-primary' : 'max-md:hidden'"
      >
        <NuxtLink
          primary-link
          v-for="link in navbar.navbar_items"
          :key="link.id"
          :to="`/${link.URL}${link.default_active_child ? '/' + link.default_active_child : ''}`"
          :class="link.URL == params?.[0] ? 'active' : ''"
          class="conthrax"
        >
          {{ link.name }}
        </NuxtLink>
      </div>
    </div>
    <div
      v-if="navbar_sub_items && navbar_sub_items?.length != 0"
      primary
      class="h-fit min-h-fit w-full px-4 md:px-12 border-t-2 border-white justify-center items-center gap-5 flex flex-row max-md:flex-wrap"
    >
      <NuxtLink
        primary-sublink
        v-for="sublink in navbar_sub_items"
        :key="sublink.id"
        :to="`/${params?.[0]}/${sublink.URL}`"
        :class="sublink.URL == params?.[1] ? 'active' : ''"
        class="w-fit conthrax"
      >
        {{ sublink.name }}
      </NuxtLink>
    </div>
  </header>
</template>

<script setup lang="ts">
const {
  params: { slug: params },
} = useRoute();

const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;

const { logo, navbar } = useGlobal();

const open = ref(false);

const navbar_sub_items = computed(() => {
  if (!navbar.value) return [];
  return navbar.value.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
});
</script>
