<template>
  <div class="d-flex justify-content-center align-items-center">
    <div @click="showNotification">
      <notification-bell
        :size="20"
        iconColor="white"
        :count="getBellNotification"
        counterStyle="round"
        counterBackgroundColor="orange"
        class="mr-2"
      />
    </div>
    <div style="padding-right: 5px;">
      <div class="main-text-white nav-user-info akkurat-bold">{{ getUserName() }}</div>
      <div class="min-text-white text-right akkurat-light-regular">
        <router-link to="/perfil">
          <span class="nav-user-sub-info text-white-color">Meu Perfil</span>
        </router-link>
        <span> | </span>
        <span class="nav-user-sub-info" v-if="sending">
          <b-spinner small type="grow" ></b-spinner>Sair
          </span>
        
        <span class="nav-user-sub-info logout" v-else @click="logout">Sair</span>
      </div>
    </div>
    <div>

    <avatar v-if="user.avatar == null"  :size="35" :username="user.name "/>


      <img
        class="rounded-circle img-style align-self-center ml-1"
        alt="foto-perfil"
        :src="user.avatar_url"
        width="40px"
        height="40px"
        v-else
      />
    </div>
  </div>
</template>

<script>
import NotificationBell from "vue-notification-bell";
import Avatar from 'vue-avatar'
export default {
  name: "user-info",
  components: {
    NotificationBell,
    Avatar
  },
  data() {
    return {
      sending: false
    };
  },
  computed: {
    getBellNotification() {
      return 5;
    },
     user(){
      return this.$store.state.user.user;
    }
  },
  methods: {
    goTo() {
      this.$router.push({ name: "profile" });
    },
    showNotification() {
      console.log("show notification ");
    },
    getUserName() {
      return this.$store.state.user.user.name;
    },
    logout() {
      var vm = this;
      this.sending = true;
      this.$store
        .dispatch("logoutRequest", {})
        .then(function(resp) {
          vm.sending = false;
          vm.$store.commit("pushNotification", {
            type: "success",
            timeout: 5,
            message: resp.msg
          });
          
            vm.$router.go();
        
        })
        .catch(function(err) {
          vm.$store.commit("pushNotification", {
            type: "danger",
            timeout: 5,
            message: "Falha ao desconectar a página"
          });
          _.delay(function() {
            vm.$router.go();
          }, 4000);
        });
    }
  },
  mounted() {
    document.getElementsByClassName("notification-counter")[0].style.padding =
      "0 4px 0 4px";
  }
};
</script>

<style scoped>
#notification-bell:hover {
  cursor: pointer;
}

.nav-user-sub-info.logout {
  cursor: pointer;
  display: inline !important;
}
</style>
