<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>
      <input id="navToggle" v-model="isBurgerOpen" type="checkbox">
      <label :aria-label="burgerLabel" for="navToggle">
        <span/><span/><span/><span/>
      </label>
      <nav>
        <ul class="main-nav">
          <li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
            <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
              <Icon :name="`ph:${icon}-duotone`" mode="svg" />
              {{ label }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script lang="ts" setup>
let observer: IntersectionObserver
const header = ref<HTMLElement | null>(null)
const headerWrapper = ref<HTMLElement | null>(null)
const stickyWatch = ref<HTMLElement | null>(null)

const isBurgerOpen = ref<boolean>(false)
const burgerOpenLabel = 'Burgermenü öffnen'
const burgerCloseLabel = 'Burgermenü schließen'
const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burgerOpenLabel)

const nav = [
  {
    to: `/booking`,
    label: 'Projektbuchung',
    icon: 'calendar-check',
    aria: 'Link dieser Seite: Preise'
  },
  {
    to: `/flatrate`,
    label: 'Flatrate',
    icon: 'piggy-bank',
    aria: 'Link dieser Seite: Preise'
  },
  {
    to: `/references`,
    label: 'Referenzen',
    icon: 'sparkle',
    aria: 'Link dieser Seite: Referenzen'
  },
  {
    to: `/contact`,
    label: 'Kontakt',
    icon: 'chats-circle',
    aria: 'Link dieser Seite: Kontakt'
  },
]

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>
