<template>
  <div class="ml-1">
    <div
      :class="
        'rounded-top toolbar toolbar-' +
          (expandToolbar ? 'expanded' : 'collapsed')
      "
    >
      <Identify class="pointer" />
      <Layers class="pointer" />
      <Profiles class="pointer" />
      <Gauges class="pointer" />
      <Linetool class="pointer" />
      <Polygontool class="pointer" />
      <Pdftool class="pointer" />
    </div>
    <div
      @click="$store.commit('application/expandToolbar', !expandToolbar)"
      class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"
    >
      <font-awesome-icon
        class="pointer"
        :icon="expandToolbar ? 'angle-up' : 'angle-down'"
      ></font-awesome-icon>
    </div>
  </div>
</template>

<style lang="scss">
// not scoped to affect nested components
// doen't work when put in application/assets/application.sass... why??? o_O
.toolbar {
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: max-height 0.4s;
  margin-bottom: auto;
}

.toolbar-collapsed {
  max-height: 6rem;
}

.toolbar-expanded {
  max-height: 100%;
}

.toolbar-button {
  opacity: 0.96;
  color: #666;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  z-index: 2;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}

.toolbar-button:last-child {
  border-bottom: none;
}

.toolbar-button .inverted {
  color: #17a2b8;
}

.toolbar-button .grey {
  color: #ddd;
}

.toolbar-button .indicator {
  color: #fff;
  background: #17a2b8;
  position: absolute;
  bottom: -14px;
  left: -14px;
  padding: 2px 4px 1px;
  font-size: 11px;
  line-height: 11px;
  border-top-right-radius: 0.25rem;
  transition: bottom 0.3s, left 0.3s;
}

.toolbar-button .indicator.show {
  left: 0;
  bottom: 0;
}

.toolbar-toggle {
  height: 1.2rem;
  border-bottom: none;
}
</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):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapState, mapGetters } from "vuex";
import { LAYERS } from "@/store/map.js";

export default {
  name: "toolbar",
  components: {
    Identify: () => import("./Identify.vue"),
    Layers: () => import("./Layers.vue"),
    Linetool: () => import("./Linetool.vue"),
    Polygontool: () => import("./Polygontool.vue"),
    Profiles: () => import("./Profiles.vue"),
    Gauges: () => import("./Gauges.vue"),
    Pdftool: () => import("./Pdftool.vue")
  },
  computed: {
    ...mapGetters("map", ["getVSourceByName"]),
    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
    ...mapState("application", ["expandToolbar"])
  },
  mounted() {
    window.addEventListener("keydown", e => {
      // Escape
      if (e.keyCode === 27) {
        this.lineTool.setActive(false);
        this.polygonTool.setActive(false);
        this.cutTool.setActive(false);
        this.$store.commit("map/setCurrentMeasurement", null);
        this.$store.dispatch("map/enableIdentifyTool");
        this.getVSourceByName(LAYERS.DRAWTOOL).clear();
      }
    });
  }
};
</script>