<template>
    <div class="d-flex flex-column">
        <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool rounded">
            <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
        </div>
        <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool rounded">
            <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
        </div>
        <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool rounded" v-if="selectedSurvey">
            <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
        </div>
    </div>
</template>

<style lang="sass" scoped>
.drawtool
  background-color: white
  padding: $small-offset
  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>
 * 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", [
      "drawMode",
      "drawTool",
      "cutMode",
      "cutTool",
      "openLayersMap"
    ]),
    ...mapState("bottlenecks", ["selectedSurvey"])
  },
  methods: {
    toggleLineMode() {
      this.disableDrawTool();
      this.disableCutTool();
      this.$store.commit(
        "map/drawMode",
        this.drawMode !== "LineString" ? "LineString" : null
      );
      this.$store.commit("map/cutMode", null);
      if (this.drawMode) this.enableDrawTool();
    },
    togglePolygonMode() {
      this.disableDrawTool();
      this.disableCutTool();
      this.$store.commit(
        "map/drawMode",
        this.drawMode !== "Polygon" ? "Polygon" : null
      );
      this.$store.commit("map/cutMode", null);
      if (this.drawMode) this.enableDrawTool();
    },
    toggleCutMode() {
      this.disableCutTool();
      this.disableDrawTool();
      this.$store.commit("map/cutMode", !this.cutMode);
      this.$store.commit("map/drawMode", null);
      if (this.cutMode) this.enableCutTool();
    },
    enableDrawTool() {
      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
      drawVectorSrc.clear();
      const drawTool = new Draw({
        source: drawVectorSrc,
        type: this.drawMode,
        maxPoints: this.drawMode === "LineString" ? 2 : 50
      });
      drawTool.on("drawstart", () => {
        drawVectorSrc.clear();
        this.$store.commit("map/setCurrentMeasurement", null);
        // we are not setting an id here, to avoid the regular identify to
        // pick it up
        // event.feature.setId("drawn.1"); // unique id for new feature
      });
      drawTool.on("drawend", this.drawEnd);
      this.$store.commit("map/drawTool", drawTool);
      this.openLayersMap.addInteraction(drawTool);
    },
    disableDrawTool() {
      this.$store.commit("map/setCurrentMeasurement", null);
      this.getLayerByName("Draw Tool")
        .data.getSource()
        .clear();
      this.openLayersMap.removeInteraction(this.drawTool);
      this.$store.commit("map/drawTool", null);
    },
    drawEnd(event) {
      if (this.drawMode === "Polygon") {
        const areaSize = getArea(event.feature.getGeometry());
        // also place the a rounded areaSize in a property,
        // so identify will show it
        this.$store.commit("map/setCurrentMeasurement", {
          quantity: "Area",
          unitSymbol: areaSize > 100000 ? "km²" : "m²",
          value:
            areaSize > 100000
              ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
              : Math.round(areaSize)
        });
      }
      if (this.drawMode === "LineString") {
        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);
    },
    enableCutTool() {
      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.on("drawstart", () => {
        cutVectorSrc.clear();
        // we are not setting an id here, to avoid the regular identify to
        // pick it up
        // event.feature.setId("drawn.1"); // unique id for new feature
      });
      cutTool.on("drawend", this.cutEnd);
      this.$store.commit("map/cutTool", cutTool);
      this.openLayersMap.addInteraction(cutTool);
    },
    disableCutTool() {
      this.$store.commit("map/setCurrentMeasurement", null);
      this.openLayersMap.removeInteraction(this.cutTool);
      this.$store.commit("map/cutTool", null);
    },
    cutEnd(event) {
      this.$store.dispatch("fairwayprofile/cut", event.feature);
    }
  },
  mounted() {
    window.addEventListener("keydown", e => {
      // Escape
      if (e.keyCode === 27) {
        this.$store.commit("map/drawMode", null);
        this.$store.commit("map/cutMode", false);
        this.disableDrawTool();
        this.disableCutTool();
      }
    });
  }
};
</script>