<template>
    <div class="ml-2">
        <div :class="'toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')">
            <Identify></Identify>
            <Layers></Layers>
            <Cuttool></Cuttool>
            <Linetool></Linetool>
            <Polygontool></Polygontool>
            <Pdftool></Pdftool>
        </div>
        <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button bg-info text-white">
            <i :class="'fa fa-angle-' + (expandToolbar ? 'up' : 'down')"></i>
        </div>
    </div>
</template>

<style lang="sass">
// not scoped to affect nested components
// doen't work when put in application/assets/application.sass... why??? o_O
.toolbar
  overflow: hidden
  transition: max-height 0.4s

.toolbar-collapsed
  max-height: (3 * $icon-height) + (3 * $offset)

.toolbar-expanded
  max-height: 100%

.toolbar-button
  height: $icon-width
  width: $icon-height
  align-items: center
  justify-content: center
  display: flex
  background: #fff
  margin-bottom: $offset
  border-radius: $border-radius
  box-shadow: $shadow-xs
  z-index: 2
  pointer-events: auto
  .inverted
    color: #17a2b8
  .grey
    color: #ddd
</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";

export default {
  name: "toolbar",
  components: {
    Identify: () => import("./buttons/Identify.vue"),
    Layers: () => import("./buttons/Layers.vue"),
    Linetool: () => import("./buttons/Linetool.vue"),
    Polygontool: () => import("./buttons/Polygontool.vue"),
    Cuttool: () => import("./buttons/Cuttool.vue"),
    Pdftool: () => import("./buttons/Pdftool.vue")
  },
  computed: {
    ...mapGetters("map", ["getLayerByName"]),
    ...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.getLayerByName("Draw Tool")
          .data.getSource()
          .clear();
      }
    });
  }
};
</script>