<script setup>
import { RouterLink, useRoute } from 'vue-router'
import logo from '@/assets/pictures/logo.png'
import LoginView from '@/views/LoginView.vue'
import router from '@/router'
import axios from 'axios'
import EventBus from '@/utils/eventBus'

// Je aktivní daný odkaz v navbaru?
// Zjišťuje jestli se předaný routePath rovná aktuálnímu routu
const isActiveLink = (routePath) => {
  const route = useRoute()
  return route.path === routePath
}

// Zobrazí okno loginu
function showLogin() {
  router.push('/')
  document.getElementById('id01').style.display = 'block'
}

defineOptions({
  name: 'NavBar',
  data() {
    return {
      user: {
        username: localStorage.getItem('username')
      },
      isLoggedIn: false
    }
  },
  methods: {
    async checkLoginStatus() {
      const token = localStorage.getItem('x-access-token')
      const username = localStorage.getItem('username')
      if (token && username) {
        try {
          const response = await axios.post(
            'http://localhost:3001/auth',
            {},
            {
              headers: {
                'x-access-token': token
              }
            }
          )

          if (response) {
            this.isLoggedIn = true
            this.user.username = username
          } else {
            this.isLoggedIn = false
            this.user.username = ''
          }
        } catch (err) {
          console.log('Error verifikace tokenu', err)
          this.isLoggedIn = false
          this.user.username = ''
        }
      }
    },

    logout() {
      localStorage.removeItem('x-access-token')
      localStorage.removeItem('username')
      localStorage.removeItem('userId')
      this.isLoggedIn = false
      this.user.username = ''
      location.reload()
    }
  },
  mounted() {
    this.checkLoginStatus()
  },
  created() {
    EventBus.addEventListener('user-logged-in', this.checkLoginStatus)
  },
  beforeUnmount() {
    EventBus.removeEventListener('user-logged-in', this.checkLoginStatus)
  }
})
</script>

<template>
  <header>
    <nav class="nav-logo">
      <RouterLink to="/">
        <img v-bind:src="logo" alt="Service logo" class="logo" />
      </RouterLink>
    </nav>
    <nav>
      <ul>
        <li><RouterLink to="/" :class="[isActiveLink('/') ? 'active' : 'li']">Domů</RouterLink></li>
        <li>
          <RouterLink to="/sluzby" :class="[isActiveLink('/sluzby') ? 'active' : 'li']"
            >Služby a Plánování</RouterLink
          >
        </li>
        <li v-if="isLoggedIn">
          <RouterLink to="/skupiny" :class="[isActiveLink('/skupiny') ? 'active' : 'li']"
            >Skupiny Lékařů</RouterLink
          >
        </li>

        <li v-if="isLoggedIn">
          <button class="login" @click="logout">Logout</button>
        </li>
        <li v-else>
          <LoginView />
          <button class="login" @click="showLogin" style="width: auto">Login</button>
        </li>
        <li v-if="!isLoggedIn">
          <RouterLink to="/register" class="register">Register</RouterLink>
        </li>
        <li v-if="isLoggedIn">
          <a class="currentUser">{{ user.username }}</a>
        </li>
      </ul>
    </nav>
  </header>
</template>
