<template>
  <div class="navbar-container mb-6">
    <nav
      class="navbar container"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <nuxt-link class="navbar-item" to="/">
          <LayoutClubLogo />
        </nuxt-link>
        <a
          role="button"
          class="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          @click="isBurgerOpen = !isBurgerOpen"
        >
          <!-- the next three lines are meant for the burger menu -->
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
        <div class="navbar-start">
          <nuxt-link
            v-for="(menuItem, index) of menuItems"
            :key="index"
            class="navbar-item"
            :to="menuItem.link"
          >
            {{ menuItem.label }}
          </nuxt-link>
        </div>
        <div class="navbar-end">
          <a class="navbar-item" role="button" @click="onLogoutClick">
            Se déconnecter
          </a>
        </div>
      </div>
    </nav>

    <div v-if="errorMessage" class="modal is-active">
      <div class="modal-background" @click="errorMessage = ''" />
      <div class="modal-card">
        <section class="modal-card-body">
          La déconnexion a échoué avec le message d'erreur suivant : "{{
            errorMessage
          }}".
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from "~/stores/authStore"

const authStore = useAuthStore()
const menuItems = [
  {
    label: "Liste des films",
    link: "/admin",
  },
  {
    label: "Accéder au site",
    link: "/",
  },
]

const isBurgerOpen = ref(false)
const errorMessage = ref("")

async function onLogoutClick() {
  const { error } = await authStore.logout()
  errorMessage.value = error.value?.message || ""
  if (!error.value) await navigateTo("/", { replace: true })
}
</script>

<style scoped lang="sass">
.navbar .navbar-brand
  &:hover
    background: rgba(237, 237, 237, 0.5)

  .navbar-item img
    max-height: none
    width: 3rem
</style>
