<template>
  <div class="ml-2">
    <div :class="'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')">
        <Identify></Identify>
        <Layers></Layers>
        <Profiles></Profiles>
        <Linetool></Linetool>
        <Polygontool></Polygontool>
        <Pdftool></Pdftool>
    </div>
    <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white">
        <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon>
    </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
  box-shadow: $shadow-xs
  overflow: hidden
  transition: max-height 0.4s
  margin-bottom: auto

.toolbar-collapsed
  max-height: 3 * $icon-height

.toolbar-expanded
  max-height: 100%

.toolbar-button
  opacity: $slight-transparent
  color: #666
  height: $icon-width
  width: $icon-height
  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
  &:last-child
    border-bottom: none
  .inverted
    color: $color-info
  .grey
    color: #ddd
  .indicator
    color: #fff
    background: $color-info
    position: absolute
    bottom: -14px
    left: -14px
    padding: 2px 4px 1px
    font-size: 11px
    line-height: 11px
    border-top-right-radius: $border-radius
    transition: bottom 0.3s, left 0.3s
    &.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";

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"),
    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("Draw Tool").clear();
      }
    });
  }
};
</script>