<template>
  <div @click="toggleCutTool" class="toolbar-button">
      <i :class="['fa fa-area-chart', { inverted: cutTool && cutTool.getActive(), grey: !selectedSurvey }]"></i>
  </div>
</template>

<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";
import Draw from "ol/interaction/Draw.js";
import { Stroke, Style, Circle, Fill } from "ol/style.js";

export default {
  name: "cuttool",
  computed: {
    ...mapGetters("map", ["getLayerByName"]),
    ...mapState("map", ["lineTool", "polygonTool", "cutTool", "openLayersMap"]),
    ...mapState("bottlenecks", ["selectedSurvey"])
  },
  methods: {
    toggleCutTool() {
      console.log(this.selectedSurvey);
      if (this.selectedSurvey) {
        this.cutTool.setActive(!this.cutTool.getActive());
        this.lineTool.setActive(false);
        this.polygonTool.setActive(false);
        this.$store.commit("map/setCurrentMeasurement", null);
      }
    },
    cutEnd(event) {
      this.$store.dispatch("fairwayprofile/cut", event.feature);
    }
  },
  created() {
    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);
    }
  }
};
</script>