<template>
  <section class="Navigation" :class="{ open }">
    <nav ref="nav">
      <ul class="points">
        <li v-for="page in pages">
          <RouterLink :to="page.route" @click="close()" active-class="active">
            <FontAwesomeIcon class="icon" :icon="page.icon" />
            <span>{{ page.label }}</span>
          </RouterLink>
        </li>
      </ul>
    </nav>
  </section>
</template>

<script setup lang="ts">
import { useNavigation } from '../../composables/navigation.ts'
import { computed, onMounted, reactive, useTemplateRef } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons/faClockRotateLeft'
import { faCalendarDays } from '@fortawesome/pro-duotone-svg-icons/faCalendarDays'
import { onClickOutside } from '@vueuse/core'
import { useMoodStore } from '../../stores/mood.ts'

const moodStore = useMoodStore()
const nav = useNavigation()
const close = () => nav.hideNavigation()
const open = computed(() => nav.isNavigationVisible.value)

const pages = reactive([
  {
    label: 'Stimmung',
    icon: moodStore.mood.icon,
    route: '/'
  },
  {
    label: 'Verlauf',
    icon: faClockRotateLeft,
    route: '/history'
  },
  {
    label: 'Dein Jahr',
    icon: faCalendarDays,
    route: '/year'
  },
])

const navRef = useTemplateRef<HTMLElement>('nav')
onMounted(() => { onClickOutside(navRef, close) })

moodStore.$subscribe((_, state) => {
  pages[0].icon = state.mood.icon
})
</script>

<style scoped>
.Navigation {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 5000;
  width: 100vw;
  height: 100dvh;
  left: 0;
  top: 0;
  transition: 150ms ease-in-out;
  pointer-events: none;

  &.open {
    pointer-events: all;
    background: rgba(0, 0, 0, .5);

    & nav {
      translate: 0 0;
    }
  }

  nav {
    display: flex;
    flex-direction: column;
    align-items: start;
    background: var(--clr-white);
    box-shadow: var(--box-shadow-z2);
    padding: var(--padding-default);
    height: 100dvh;
    width: 70%;
    translate: -100% 0;
    transition: 150ms ease-in-out;
  }

  & .close {
    justify-self: flex-end;
    font-size: var(--font-size-xl);
  }

  & .points {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--font-size-default);
    font-family: "Roboto Condensed", sans-serif;
    gap: var(--padding-default);

    & li {
      list-style: none;
      width: 100%;

      & a {
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: var(--padding-default);
        color: var(--clr-current-dark);
        border-radius: var(--radius-default);
        padding: var(--padding-xs) var(--padding-s);
        transition: var(--transition-default);
        background: transparent;
        cursor: pointer;

        &.active {
          background: var(--clr-current-light);
          color: var(--clr-current-dark);
        }
      }
    }
  }
}
</style>