<template>
  <section class="Navigation" :class="{ open }">
    <nav ref="nav">
      <header>
        <img src="/img/nav.jpg" alt="" aria-hidden="true" />
        <strong>Soul Echo</strong>
      </header>
      <div class="points">
        <ul>
          <li v-for="page in pages">
            <RouterLink :to="page.route" @click="close()" active-class="active">
              <FontAwesomeIcon fixed-width class="icon" :icon="page.icon" />
              <span>{{ page.label }}</span>
            </RouterLink>
          </li>
        </ul>
        <ul>
          <li v-for="page in meta">
            <RouterLink :to="page.route" @click="close()" active-class="active">
              <FontAwesomeIcon fixed-width class="icon" :icon="page.icon" />
              <span>{{ page.label }}</span>
            </RouterLink>
          </li>
        </ul>
      </div>
    </nav>
  </section>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, useTemplateRef } from 'vue'
import { useNavigation } from '#/navigation.ts'
import { useMoodStore } from '~/mood.ts'
import { onClickOutside } from '@vueuse/core'
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
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 { faSquareInfo } from '@fortawesome/pro-duotone-svg-icons/faSquareInfo'
import { faGearCode } from '@fortawesome/pro-duotone-svg-icons/faGearCode'
import { faGears } from '@fortawesome/pro-duotone-svg-icons/faGears'

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

type Page = {
  label: string
  icon: IconDefinition
  route: string
}

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

const meta : Page[] = [
  {
    label: 'Einstellungen',
    icon: faGears,
    route: '/settings'
  },
  {
    label: 'Updates',
    icon: faGearCode,
    route: '/updates'
  },
  {
    label: 'Impressum',
    icon: faSquareInfo,
    route: '/imp'
  },

]

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;
    }
  }

  & header {
    position: relative;

    & strong {
      position: absolute;
      left: var(--padding-default);
      bottom: var(--padding-default);
      font-size: var(--font-size-xxxl);
      font-family: "Roboto Condensed", sans-serif;
      color: var(--clr-white);
      text-shadow: 0 2px 0 #3c3c3c, 1px 13px 15px #cbc8c8;
    }

    & img {
      width: 100%;
    }
  }

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

  & .points {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & ul {
      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);
      padding: 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>