<template>
    <div :class="sidebarStyle">
        <div
            @click="$store.commit('application/showSidebar', !showSidebar)"
            class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
        >
            <i class="ui-element d-print-none fa fa-bars"></i>
        </div>
        <div :class="menuStyle">
            <div class="menupoints" v-if="this.showSidebar">
                <router-link to="/" class="text-body d-flex flex-row nav-link">
                    <i class="fa fa-map-o align-self-center navicon"></i>Map
                </router-link>
                <div class="d-flex flex-row nav-link">
                    <i v-if="routeName == 'mainview'" class="fa fa-ship align-self-center navicon"></i>
                    <a
                        class="text-body d-flex flex-row"
                        v-if="routeName == 'mainview'"
                        href="#"
                        @click="toggleContextBox('bottlenecks')"
                    >Bottlenecks</a>
                </div>
                <div v-if="isSysAdmin">
                    <hr>
                    <div
                        v-if="routeName == 'mainview'"
                        class="nav-link d-flex menupadding text-muted"
                    >Administration</div>
                </div>
                <div v-if="isWaterwayAdmin">
                    <div v-if="routeName == 'mainview'" class="d-flex flex-row nav-link">
                        <i class="fa fa-upload align-self-center navicon"></i>
                        <a
                            href="#"
                            class="text-body"
                            @click="toggleContextBox('imports')"
                        >Import soundingresults</a>
                    </div>
                    <div v-if="routeName == 'mainview'" class="d-flex flex-row nav-link">
                        <i class="fa fa-list-ol align-self-center navicon"></i>
                        <a
                            href="#"
                            class="text-body"
                            @click="toggleContextBox('staging')"
                        >Staging area</a>
                    </div>
                    <div class="nav-link d-flex menupadding text-muted">Systemadministration</div>
                    <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
                        <i class="fa fa-address-card-o align-self-center navicon"></i>Users
                    </router-link>
                </div>
                <div v-if="isSysAdmin">
                    <router-link
                        class="text-body d-flex flex-row nav-link"
                        to="systemconfiguration"
                    >
                        <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration
                    </router-link>
                    <router-link class="text-body d-flex flex-row nav-link" to="logs">
                        <i class="fa fa-book align-self-center navicon"></i>Logs
                    </router-link>
                    <router-link class="text-body d-flex flex-row nav-link" to="importqueue">
                        <i class="fa fa-exchange align-self-center navicon"></i>Importqueue
                    </router-link>
                </div>
                <hr>
                <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link">
                    <i class="fa fa-power-off align-self-center navicon"></i>
                    Logout {{ user }}
                </a>
            </div>
        </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",
      "showInContextBox"
    ]),
    menuStyle() {
      return {
        menu: true,
        nav: true,
        "flex-column": true
      };
    },
    sidebarStyle() {
      return [
        "ui-element position-relative sidebar rounded shadow d-print-none mb-auto",
        {
          sidebarcollapsed: !this.showSidebar,
          sidebarextended: this.showSidebar
        }
      ];
    }
  },
  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");
    },
    toggleContextBox(context) {
      this.$store.commit(
        "application/showInContextBox",
        this.showInContextBox === context ? null : context
      );
      if (this.showInContextBox === context) {
        this.$store.commit("application/showSearchbar", true);
      } else {
        this.$store.commit(
          "application/showSearchbar",
          this.showSearchbarLastState
        );
      }
    }
  }
};
</script>

<style lang="sass" scoped>

a:hover
  text-decoration: none

.menupoints
  text-align: left

.menubutton
  height: $icon-height
  width: $icon-width
  top: 0
  left: 0

.router-link-exact-active
  background-color: #f2f2f2

.navicon
  margin-right: $small-offset

.menu
  padding-top: $small-offset

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

.sidebarcollapsed
  height: 30px
  width: 30px
  transition: $transition-fast

.sidebarextended
  height: $sidebar-height
  width: $sidebar-width
  min-width: $sidebar-width
</style>