<template>
    <div>
        <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png">
        <div :class="userManagementStyle">
            <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span>
            <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
                <i class="fa fa-power-off"></i>
            </span>
        </div>
    </div>
</template>

<style lang="scss">
.userpic {
  background: white;
  position: absolute;
  bottom: $offset;
  left: $offset;
  height: $icon-width;
  width: $icon-height;
  border-radius: $border-radius;
}

.username {
  margin-left: 40px;
}

.usermanagement {
  background: white;
  margin-left: $offset;
  padding: $offset;
  border-radius: $border-radius;
  margin-bottom: $offset;
  height: $icon-height;
}

.usermanagementcollapsed {
  transition: 0.3s;
  width: $icon-width;
}

.usermanagementexpanded {
  width: $sidebar-width;
}
</style>

<script>
import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {};
  },
  methods: {
    extendUserMenu() {
      this.$store.commit("application/toggleUserMenu");
    },
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$store.commit("application/resetSidebar");
      this.$store.commit("application/resetUserMenu");
      this.$router.push("/login");
    }
  },
  computed: {
    ...mapGetters("user", ["userinfo"]),
    ...mapGetters("application", ["isUsermenuCollapsed"]),
    userManagementStyle() {
      return {
        "ui-element": true,
        "d-flex": true,
        "flex-row": true,
        "justify-content-around": true,
        usermanagement: true,
        usermanagementcollapsed: this.isUsermenuCollapsed,
        usermanagementexpanded: !this.isUsermenuCollapsed,
        shadow: true
      };
    }
  }
};
</script>