<template>
  <div ref="stickyWatch" />
  <header ref="header" class="Header">
    <div ref="headerWrapper" class="wrapper z-0">
      <NuxtLink to="/" aria-label="Link zur Startseite">
        <strong>
          <Icon class="logo" name="wf:logo" mode="svg" size="40px" />
          webfussel
        </strong>
      </NuxtLink>
      <button class="burger" :aria-label="burgerLabel" @click="() => nav.toggleNavigation()">
        <Icon name="ph:waves" mode="svg" size="2em" />
      </button>
      <nav>
        <ul class="main-nav">
          <li v-for="({label, to, aria, icon}) in navigation" :key="label">
            <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
              <Icon :name="icon" mode="svg" />
              {{ label }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script lang="ts" setup>
import { navigation } from '~/utils/navigation'

let observer: IntersectionObserver
const header = useTemplateRef('header')
const headerWrapper = useTemplateRef('headerWrapper')
const stickyWatch = useTemplateRef('stickyWatch')

const nav = useNavigation()
const burgerOpenLabel = 'Burgermenü öffnen'
const burgerCloseLabel = 'Burgermenü schließen'
const burgerLabel = computed(() => nav.isNavigationVisible.value ? burgerCloseLabel : burgerOpenLabel)

onMounted(() => {
  observer = new IntersectionObserver(([entry]) => {
    if (!entry) return
    const { isIntersecting } = entry
    header.value?.classList.toggle('sticks', !isIntersecting)
    headerWrapper.value?.classList.toggle('z-4', !isIntersecting)
    headerWrapper.value?.classList.toggle('z-0', isIntersecting)
  }, {
    rootMargin: '3% 0px 0px 0px'
  })
  observer.observe(stickyWatch.value!)
})

onUnmounted(() => {
  observer.disconnect()
})
</script>
