<template>
    <div :class="sidebarStyle">
        <div
            @click="$store.commit('application/showSidebar', !showSidebar)"
            class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center"
        >
            <font-awesome-icon icon="bars"></font-awesome-icon>
        </div>
        <div class="menu text-nowrap text-left">
              <router-link to="/">
                  <font-awesome-icon icon="map-marked-alt" fixed-width></font-awesome-icon>
                  Map
              </router-link>
              <a href="#"
                 @click="toggleContextBox('bottlenecks')"
                 :class="['secondary', { active: isActive('bottlenecks') }]">
                  <font-awesome-icon icon="ship" fixed-width></font-awesome-icon>
                  Bottlenecks
              </a>
              <div v-if="isWaterwayAdmin">
                <a href="#"
                   @click="toggleContextBox('imports')"
                   :class="['secondary', { active: isActive('imports') }]">
                      <font-awesome-icon icon="upload" fixed-width></font-awesome-icon>
                      Import soundingresults
                  </a>
                  <a href="#"
                     @click="toggleContextBox('staging')"
                     :class="['secondary', { active: isActive('staging') }]">
                      <font-awesome-icon icon="clipboard-check" fixed-width></font-awesome-icon>
                      Staging area
                  </a>
                  <small class="text-muted pl-3">Systemadministration</small>
                  <hr class="m-0">
                  <router-link to="usermanagement">
                      <font-awesome-icon icon="users-cog" fixed-width></font-awesome-icon>
                      Users
                  </router-link>
              </div>
              <div v-if="isSysAdmin">
                  <router-link to="systemconfiguration">
                      <font-awesome-icon icon="wrench" fixed-width></font-awesome-icon>
                      Systemconfiguration
                  </router-link>
                  <router-link to="logs">
                      <font-awesome-icon icon="book" fixed-width></font-awesome-icon>
                      Logs
                  </router-link>
                  <router-link to="importqueue">
                      <font-awesome-icon icon="tasks" fixed-width></font-awesome-icon>
                      Importqueue
                  </router-link>
              </div>
              <hr class="m-0">
              <a href="#" @click="logoff">
                  <font-awesome-icon icon="power-off" fixed-width></font-awesome-icon>
                  Logout {{ user }}
              </a>
        </div>
    </div>
</template>

<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>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapGetters, mapState } from "vuex";

export default {
  name: "sidebar",
  props: ["routeName"],
  computed: {
    ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
    ...mapState("user", ["user"]),
    ...mapState("application", [
      "showSidebar",
      "showSearchbarLastState",
      "contextBoxContent",
      "showContextBox"
    ]),
    sidebarStyle() {
      return [
        "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto",
        {
          sidebarcollapsed: !this.showSidebar,
          sidebarextended: this.showSidebar
        }
      ];
    }
  },
  methods: {
    logoff() {
      this.$store.commit("reset");
      this.$store.commit("user/clearAuth");
      this.$router.push("/login");
    },
    toggleContextBox(context) {
      this.$router.push("/");
      this.$store.commit("application/showContextBox", true);
      this.$store.commit("application/contextBoxContent", context);
      this.$store.commit("application/showSearchbar", true);
    },
    isActive(item) {
      return (
        this.showContextBox &&
        this.contextBoxContent === item &&
        this.routeName == "mainview"
      );
    }
  }
};
</script>

<style lang="sass" scoped>
.menubutton
  height: $icon-height
  width: $icon-width
  top: 0
  left: 0
  color: #666

.menu
  a
    display: block
    text-align: left
    padding: 0.5rem 1rem
    color: #333
    text-decoration: none
    svg path
      fill: #666
    &:hover
      background-color: #f8f8f8
    &.router-link-exact-active
      background-color: $color-info
      color: #fff
      svg path
        fill: #fff
    &.secondary
      font-size: 0.9rem
      &.active
        background: lighten($color-info, 55)
        color: darken($color-info, 15)
        svg path
          fill: darken($color-info, 15)

.sidebar
  background-color: #ffffff
  padding-top: $large-offset
  opacity: $slight-transparent
  transition: $transition-fast
  overflow: hidden

.sidebarcollapsed
  max-height: $icon-height
  max-width: $icon-width

.sidebarextended
  max-height: 35rem
  max-width: $sidebar-width
</style>