<template>
  <ul class="nav nav-tabs">
    <li role="presentation" v-bind:class="{ active: $route.name === 'home' }">
      <router-link to="/"> Home </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'about' }">
      <router-link to="/about"> About </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensates' }">-->
    <!--<router-link to="/condensates">-->
    <!--Condensates-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
    <!--<router-link to="/browse">-->
    <!--Browse-->
    <!--</router-link>-->
    <!--</li>-->
    <li
      role="presentation"
      v-bind:class="{ active: $route.name === 'biomolecular' }"
    >
      <router-link to="/biomolecular"> Biomolecular Condensates </router-link>
    </li>
    <li
      role="presentation"
      v-bind:class="{ active: $route.name === 'synthetic' }"
    >
      <router-link to="/synthetic"> Synthetic Condensates </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensate_example' }">-->
    <!--<router-link to="/condensate_example">-->
    <!--Condensate Example-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'protein_example' }">-->
    <!--<router-link to="/protein_example">-->
    <!--Protein Example-->
    <!--</router-link>-->
    <!--</li>-->
    <li
      role="presentation"
      v-bind:class="{ active: $route.name === 'statistics' }"
    >
      <router-link to="/statistics"> Statistics </router-link>
    </li>
    <li
      role="presentation"
      v-bind:class="{ active: $route.name === 'encyclopedia' }"
    >
      <router-link to="/encyclopedia"> Encyclopedia </router-link>
    </li>
    <li
        v-show="userData !== null && (userRole === 'Contributor' || userRole === 'Maintainer')"
        role="presentation"
        v-bind:class="{ active: $route.name === 'updateItems' }"
    >
      <router-link to="/updateItems"> Update Items</router-link>
    </li>
    <li
        v-show="userData !== null"
        role="presentation"
        v-bind:class="{ active: $route.name === 'profile' }">
      <router-link to="/profile"> Profile </router-link>
    </li>
    <li v-show="userData !== null" role="presentation">
      <router-link to="/login" v-on:click.native="signOut">
        <span class="fa fa-sign-out" />
      </router-link>
    </li>
    <li
      v-show="userData === null"
      role="presentation"
      v-bind:class="{ active: $route.name === 'login' }"
    >
      <router-link to="/login"> Login </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Links",
  data() {
    return {
      // userData: this.$store.getters['User/userData']
    };
  },
  methods: {
    signOut() {
      const vm = this;
      window.localStorage.removeItem("jwt");
      window.localStorage.removeItem("userData");
      window.localStorage.removeItem("roleName");
      vm.$store.dispatch("User/logOut");
      vm.$router.push("/login");
    },
  },
  computed: {
    userData: function () {
      return this.$store.getters["User/userData"];
    },
    userRole: function () {
      return this.$store.getters["User/userRole"];
    },
  },
  mounted: function () {
    const vm = this;

    // console.log(vm.userData)
    // console.log(this.$route.name)
    // if(vm.userData !== null) {
    //   vm.$router.push('/profile')
    // }
  },
};
</script>