<template>
  <div class="flex justify-between bg-gray-900 text-white pt-2 pb-3 pl-8">
    <div class="basis-1/3 logo">
      <p class="font-mono text-lg py-2">
        <RouterLink to="/">Filmstudiostube</RouterLink>
      </p>
    </div>
    <div class="flex justify-around basis-1/3 max-md:hidden">
      <div v-if="!isAnonym">
        <RouterLink to="/contracts">
          <p class="py-2">Aufträge</p>
        </RouterLink>
      </div>
      <div v-if="!isAnonym" class="nav-item">
        <RouterLink to="/support">
          <p class="py-2">Support</p>
        </RouterLink>
      </div>
      <div v-if="isVerwaltung" class="nav-item">
        <RouterLink to="/administration">
          <p class="py-2">Administration</p>
        </RouterLink>
      </div>
      <div v-if="isAnonym" class="nav-item">
        <RouterLink to="/arbeiten">
          <p class="py-2">Arbeiten</p>
        </RouterLink>
      </div>
      <div v-if="isAnonym" class="nav-item">
        <RouterLink to="/contact">
          <p class="py-2">Kontakt</p>
        </RouterLink>
      </div>
      <div v-if="isAnonym" class="nav-item">
        <RouterLink to="/about">
          <p class="py-2">Über uns</p>
        </RouterLink>
      </div>
    </div>
    <div
      v-if="isAnonym"
      class="nav-item basis-1/6 max-md:justify-end max-md:pr-5 max-md:flex max-md:basis-3/6">
      <button
        class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
        @click="login">
        Login
      </button>
    </div>
    <div class="pt-2 md:hidden" @click="openNavbar">
      <div class="space-y-1.5 pt-2 pb-2 mr-2 pr-2 pl-2 bg-slate-100 rounded">
        <span class="block w-6 h-0.5 bg-gray-500"></span>
        <span class="block w-6 h-0.5 bg-gray-500"></span>
        <span class="block w-6 h-0.5 bg-gray-500"></span>
      </div>
    </div>
  </div>
  <div v-if="!isNavbarClosed">
    <ul class="bg-gray-900">
      <li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
        <RouterLink to="/contracts">Aufträge</RouterLink>
      </li>
      <li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
        <RouterLink to="/support">Support</RouterLink>
      </li>
      <li v-if="isVerwaltung" class="block text-md py-4 text-white text-center">
        <RouterLink to="/administration">Administration</RouterLink>
      </li>
      <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
        <RouterLink to="/arbeiten">Arbeiten</RouterLink>
      </li>
      <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
        <RouterLink to="/contact">Kontakt</RouterLink>
      </li>
      <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
        <RouterLink to="/about">Über uns</RouterLink>
      </li>
      <li v-if="isAnonym" class="py-2 flex justify-center">
        <button
          class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
          @click="login">
          Login
        </button>
      </li>
    </ul>
  </div>
</template>
<script>
import { getKeycloak, keycloakSetup } from '../authentication/AuthHelper'

export default {
  data() {
    return {
      keycloak: this.$store.state.keycloak.keycloak,
      isNavbarClosed: true
    }
  },
  computed: {
    isVerwaltung() {
      return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
    },
    isAnonym() {
      return this.$store.state.keycloak.isAnonym
    }
  },
  methods: {
    async login() {
      if (this.$store.state.keycloak.keycloak === null) {
        await keycloakSetup()
      }
    },
    openNavbar() {
      this.isNavbarClosed = !this.isNavbarClosed
    }
  }
}
</script>
