<template>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <router-link  class="navbar-brand" to="/">Home</router-link>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto" v-if="userLoged">
          <li class="nav-item" v-for="item in navLoggedUser" :key="item.name">
             <router-link  class="nav-link" :to="item.to">{{ item.name }}</router-link>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto" v-else>
          <li class="nav-item" v-for="item in navNotLoggedUser" :key="item.name">
             <router-link  class="nav-link" :to="item.to">{{ item.name }}</router-link>
          </li>
          <li class="nav-item">
            <button class="btn  btn-sm btn-light" @click="logout">Logout</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import authTypes from '../store/types/authTypes';
@Component({
  name: 'BlogsNavbar',
  data() {
    return {
      userLoged: false,
      navLoggedUser: [
        { name:"Register", to: "/register" },
        { name:"Login", to: "/login" },
      ],
      navNotLoggedUser: [
        { name:"Home", to: "/" },
        { name:"Profile", to: "/profile" },
        { name:"About", to: "/about" },
      ],
    }
  },
  components: {
  },
})
export default class navBar extends Vue {
  private created() {
    this.$data.userLoged = !window.localStorage.getItem('_token');
  }
  public logout() {
    this.cerrarSesion();
  }
  @Action(`authModule/${authTypes.actions.LOGOUTUSER}`) cerrarSesion: any;
}
</script>