<template>
    <div>
        <img @click="$store.commit('application/showUsermenu', !showUsermenu)" class="ui-element userpic shadow" src="../application/assets/user.png">
        <div :class="userManagementStyle">
            <span v-if="showUsermenu" class="username align-self-center">{{ user }}</span>
            <span v-if="showUsermenu" 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>
/*
 * This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 * 
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 * 
 * Copyright (C) 2018 by via donau 
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 * 
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapGetters, mapState } from "vuex";
export default {
  name: "user",
  data() {
    return {};
  },
  methods: {
    logoff() {
      this.$store.commit("user/clearAuth");
      this.$store.commit("application/showSidebar", false);
      this.$store.commit("application/showUsermenu", false);
      this.$store.commit("application/showSplitscreen", false);
      this.$router.push("/login");
    }
  },
  computed: {
    ...mapState("user", ["user"]),
    ...mapState("application", ["showUsermenu"]),
    userManagementStyle() {
      return {
        "ui-element": true,
        "d-flex": true,
        "flex-row": true,
        "justify-content-around": true,
        usermanagement: true,
        usermanagementcollapsed: !this.showUsermenu,
        usermanagementexpanded: this.showUsermenu,
        shadow: true
      };
    }
  }
};
</script>