<template>
    <div @click="drawLine" class="ui-element d-flex shadow drawtool">
        <i :class="icon"></i>
    </div>
</template>

<style lang="scss">
.drawtool {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: white;
  padding: $small-offset;
  border-radius: $border-radius;
  margin-left: $offset;
  height: $icon-width;
  width: $icon-height;
  margin-bottom: $offset;
  margin-right: $offset;
  z-index: 2;
}

.inverted {
  color: #0077ff;
}
</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):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";

export default {
  name: "linetool",
  methods: {
    drawLine() {
      if (!this.selectedMorph && this.drawMode === "LineString") {
        this.$store.commit("application/activateDrawModePolygon");
      } else {
        this.$store.commit("application/toggleDrawModeLine");
      }
    }
  },
  computed: {
    ...mapState("application", ["drawMode"]),
    ...mapState("identifystore", ["identifiedFeatures"]),
    ...mapState("fairwayprofile", ["selectedMorph"]),
    icon() {
      return {
        fa: true,
        "fa-pencil": !this.selectedMorph,
        "fa-pencil inverted":
          !this.selectedMorph && this.drawMode === "LineString",
        "fa-area-chart": this.selectedMorph,
        "fa-edit inverted": this.drawMode === "Polygon"
      };
    }
  }
};
</script>