<template>
    <div class="d-flex flex-column">
        <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
            <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
        </div>
        <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
            <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
        </div>
        <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
            <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i>
        </div>
    </div>
</template>

<style lang="sass" scoped>
.drawtool
  height: $icon-width
  width: $icon-height
  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>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { mapState, mapGetters } from "vuex";
import { getLength, getArea } from "ol/sphere.js";
import Draw from "ol/interaction/Draw.js";
import { Stroke, Style, Circle, Fill } from "ol/style.js";

export default {
  name: "drawtool",
  computed: {
    ...mapGetters("map", ["getLayerByName"]),
    ...mapState("map", [
      "lineTool",
      "polygonTool",
      "cutTool",
      "openLayersMap"
    ]),
    ...mapState("bottlenecks", ["selectedSurvey"])
  },
  methods: {
    toggleLineTool() {
      this.lineTool.setActive(!this.lineTool.getActive());
      this.polygonTool.setActive(false);
      this.cutTool.setActive(false);
      this.$store.commit("map/setCurrentMeasurement", null);
      this.getLayerByName("Draw Tool").data.getSource().clear();
    },
    togglePolygonTool() {
      this.polygonTool.setActive(!this.polygonTool.getActive());
      this.lineTool.setActive(false);
      this.cutTool.setActive(false);
      this.$store.commit("map/setCurrentMeasurement", null);
      this.getLayerByName("Draw Tool").data.getSource().clear();
    },
    toggleCutTool() {
      this.cutTool.setActive(!this.cutTool.getActive());
      this.lineTool.setActive(false);
      this.polygonTool.setActive(false);
      this.$store.commit("map/setCurrentMeasurement", null);
    },
    lineEnd(event) {
      const length = getLength(event.feature.getGeometry());
      this.$store.commit("map/setCurrentMeasurement", {
        quantity: "Length",
        unitSymbol: "m",
        value: Math.round(length * 10) / 10
      });
      this.$store.commit("application/showIdentify", true);
    },
    polygonEnd(event) {
      const areaSize = getArea(event.feature.getGeometry());
      this.$store.commit("map/setCurrentMeasurement", {
        quantity: "Area",
        unitSymbol: areaSize > 100000 ? "km²" : "m²",
        value:
          areaSize > 100000
            // convert into 1 km² == 1000*1000 m² and round to 1000 m²
            ? Math.round(areaSize / 1000) / 1000
            : Math.round(areaSize)
      });
      this.$store.commit("application/showIdentify", true);
    },
    cutEnd(event) {
      this.$store.dispatch("fairwayprofile/cut", event.feature);
    }
  },
  created() {
    if (!this.lineTool) {
      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
      const lineTool = new Draw({
        source: drawVectorSrc,
        type: "LineString",
        maxPoints: 2
      });
      lineTool.setActive(false);
      lineTool.on("drawstart", () => {
        drawVectorSrc.clear();
        this.$store.commit("map/setCurrentMeasurement", null);
      });
      lineTool.on("drawend", this.lineEnd);
      this.$store.commit("map/lineTool", lineTool);
      this.openLayersMap.addInteraction(lineTool);
    }

    if (!this.polygonTool) {
      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
      const polygonTool = new Draw({
        source: drawVectorSrc,
        type: "Polygon",
        maxPoints: 50
      });
      polygonTool.setActive(false);
      polygonTool.on("drawstart", () => {
        drawVectorSrc.clear();
        this.$store.commit("map/setCurrentMeasurement", null);
      });
      polygonTool.on("drawend", this.polygonEnd);
      this.$store.commit("map/polygonTool", polygonTool);
      this.openLayersMap.addInteraction(polygonTool);
    }

    if (!this.cutTool) {
      const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
      const cutTool = new Draw({
        source: cutVectorSrc,
        type: "LineString",
        maxPoints: 2,
        style: new Style({
          stroke: new Stroke({
            color: "#444",
            width: 2,
            lineDash: [7, 7]
          }),
          image: new Circle({
            fill: new Fill({ color: "#333" }),
            stroke: new Stroke({ color: "#fff", width: 1.5 }),
            radius: 6
          })
        })
      });
      cutTool.setActive(false);
      cutTool.on("drawstart", () => {
        cutVectorSrc.clear();
      });
      cutTool.on("drawend", this.cutEnd);
      this.$store.commit("map/cutTool", cutTool);
      this.openLayersMap.addInteraction(cutTool);
    }
  },
  mounted() {
    window.addEventListener("keydown", e => {
      // Escape
      if (e.keyCode === 27) {
        this.lineTool.setActive(false);
        this.polygonTool.setActive(false);
        this.cutTool.setActive(false);
        this.getLayerByName("Draw Tool").data.getSource().clear();
      }
    });
  }
};
</script>