<template>
  <b-navbar toggleable="sm" type="dark" variant="dark" fixed="top">

    <b-navbar-brand>
      <b>onSpot</b>
    </b-navbar-brand>


    <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

    <b-collapse id="nav-text-collapse" is-nav>

      <b-navbar-nav>
        <b-nav-item v-if="$store.getters.isLoggedIn" to="/">My Collections</b-nav-item>
        <b-nav-item v-else to="/login">Login</b-nav-item>
        <b-nav-item to="/about">About</b-nav-item>
      </b-navbar-nav>


      <b-navbar-nav class="ml-auto" v-if="$store.getters.isLoggedIn">
        <b-nav-item-dropdown right no-caret>
          <template #button-content>
            <b-icon icon="person-fill"/>
            {{ $store.state.userdata.name }}
          </template>
          <b-overlay :show="logoutProcessing">

            <b-dropdown-text>Logged in to...</b-dropdown-text>
            <b-dropdown-text>
              <b-img src="@/assets/musicbrainz.svg" width="200px"/>
            </b-dropdown-text>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item @click="performLogout">Logout</b-dropdown-item>

          </b-overlay>
        </b-nav-item-dropdown>
      </b-navbar-nav>


    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      logoutProcessing: false
    }
  },
  methods: {
    performLogout() {
      this.logoutProcessing = true;
      this.$api.performLogout().then(() => {
        this.$store.dispatch('storeUserData', null).then(() => {
          this.$router.push('/login').catch(() => {
          });

          this.logoutProcessing = false;
        })
      }).catch(({text}) => {
        this.$showToast(text);
        this.logoutProcessing = false;
      });
    }
  }
}
</script>

<style scoped>

</style>