<template>
  <div v-frame-hm="97" v-frame-wm="393" v-frame-xm="0" v-frame-ym="790" class="nav-bar" :class="{ hidden: hideMenu }">
    <img v-if="postfachBadge" src="~/assets/images/mobile/common/nav-bar/frame-badge.png" />
    <img v-else src="~/assets/images/mobile/common/nav-bar/frame.png" />

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="8" v-y:97="0" :to="`${prefix}`">
      <img v-if="active === ''" src="~/assets/images/mobile/common/nav-bar/uebersicht-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-if="hasPostfachLink" v-h:97="80" v-w:393="69" v-x:393="85" v-y:97="0" :to="`${prefix}/postfach`">
      <template v-if="active === 'postfach'">
        <img v-if="postfachBadge" src="~/assets/images/mobile/common/nav-bar/postfach-active-badge.png" />
        <img v-else src="~/assets/images/mobile/common/nav-bar/postfach-active.png" />
      </template>
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="162" v-y:97="0" :to="`${prefix}/vertraege`">
      <img v-if="active === 'vertraege'" src="~/assets/images/mobile/common/nav-bar/vertraege-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="239" v-y:97="0" :to="`${prefix}/services`">
      <img v-if="active === 'services'" src="~/assets/images/mobile/common/nav-bar/services-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="316" v-y:97="0" :to="`${prefix}/tipps`">
      <img v-if="active === 'tipps'" src="~/assets/images/mobile/common/nav-bar/tipps-active.png" />
      <Spot />
    </NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  /**
   * The prefix for the navigation links.
   *
   * @default '/mobile'
   */
  prefix: {
    type: String,
    default: '/mobile',
  },

  /**
   * Whether the postfach badge should be shown.
   *
   * @default true
   */
  postfachBadge: {
    type: Boolean,
    default: true,
  },

  /**
   * Whether the postfach link should be shown.
   *
   * @default true
   */
  hasPostfachLink: {
    type: Boolean,
    default: true,
  },
})

const route = useRoute()
const active = computed(() => route.path.split('/')[props.prefix.split('/').length] ?? '')
const hideMenu = useHideMenu()
</script>

<style scoped>
.nav-bar {
  transition: transform 0.3s ease;
}

.nav-bar,
:deep(img) {
  position: absolute;
}

.hidden {
  transform: translateY(100%);
}
</style>
