<template>
    <div id="map" :class="mapStyle"></div>
</template>

<style lang="scss">
.mapsplit {
  height: 50vh;
}

.mapfull {
  height: 100vh;
}
</style>

<script>
import { HTTP } from "../application/lib/http";
import "ol/ol.css";
import { Map, View } from "ol";
// needed for vector filter example
// import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
import { WFS, GeoJSON } from "ol/format.js";
import { mapGetters } from "vuex";
import Draw from "ol/interaction/Draw.js";
import { Vector as VectorSource } from "ol/source.js";
import { Vector as VectorLayer } from "ol/layer.js";

export default {
  name: "maplayer",
  props: ["drawMode", "lat", "long", "zoom", "split"],
  data() {
    return {
      projection: "EPSG:3857",
      openLayersMap: null,
      interaction: null,
      vectorLayer: null,
      vectorSource: null
    };
  },
  computed: {
    ...mapGetters("mapstore", ["layers"]),
    mapStyle() {
      return {
        mapfull: !this.split,
        mapsplit: this.split
      };
    },
    layerData() {
      const l = this.layers.map(x => {
        return x.data;
      });
      return [...l, this.vectorLayer];
    }
  },
  methods: {
    createVectorSource() {
      this.vectorSource = new VectorSource({ wrapX: false });
    },
    createVectorLayer() {
      this.vectorLayer = new VectorLayer({
        source: this.vectorSource
      });
    },
    removeCurrentInteraction() {
      this.openLayersMap.removeInteraction(this.interaction);
      this.interaction = null;
    },
    createInteraction() {
      return new Draw({
        source: this.vectorSource,
        type: this.drawMode
      });
    },
    activateInteraction() {
      const interaction = this.createInteraction(this.drawMode);
      this.interaction = interaction;
      this.openLayersMap.addInteraction(interaction);
    }
  },
  watch: {
    drawMode() {
      if (this.interaction) {
        this.removeCurrentInteraction();
      } else {
        this.activateInteraction();
      }
    },
    split() {
      const map = this.openLayersMap;
      this.$nextTick(() => {
        map.updateSize();
      });
    }
  },
  mounted() {
    this.createVectorSource();
    this.createVectorLayer();
    this.openLayersMap = new Map({
      layers: this.layerData,
      target: "map",
      controls: [],
      view: new View({
        center: [this.long, this.lat],
        zoom: this.zoom,
        projection: this.projection
      })
    });

    var featureRequest2 = new WFS().writeGetFeature({
      // srsName: "urn:ogc:def:crs:EPSG::4326",
      srsName: "EPSG:3857",
      featureNS: "gemma",
      featurePrefix: "gemma",
      featureTypes: ["fairway_dimensions"],
      outputFormat: "application/json"
      // example for a filter
      //filter: greaterThanFilter("level_of_service", 0)
    });

    HTTP.post(
      "/internal/wfs",
      new XMLSerializer().serializeToString(featureRequest2),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(response => {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = this.layers[2].data.getSource();
      vectorSrc.addFeatures(features);
      // would scale to the extend of all resulting features
      // this.openLayersMap.getView().fit(vectorSrc.getExtent());
    });

    // FIXME hardwired for now
    var featureRequest3 = new WFS().writeGetFeature({
      featurePrefix: "ws-wamos",
      featureTypes: ["ienc_wtware"],
      outputFormat: "application/json"
    });

    HTTP.post(
      "/external/d4d",
      new XMLSerializer().serializeToString(featureRequest3),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(response => {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = this.layers[3].data.getSource();
      vectorSrc.addFeatures(features);
    });

    // FIXME hardwired for now
    var featureRequest4 = new WFS().writeGetFeature({
      featurePrefix: "ws-wamos",
      featureTypes: ["ienc_wtwaxs"],
      outputFormat: "application/json"
    });

    HTTP.post(
      "/external/d4d",
      new XMLSerializer().serializeToString(featureRequest4),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(response => {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = this.layers[4].data.getSource();
      vectorSrc.addFeatures(features);
    });

    // FIXME this is hardwired for now to try for an external point layer
    var featureRequest5 = new WFS().writeGetFeature({
      featurePrefix: "ws-wamos",
      featureTypes: ["ienc_dismar"],
      outputFormat: "application/json"
    });

    HTTP.post(
      "/external/d4d",
      new XMLSerializer().serializeToString(featureRequest5),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(response => {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = this.layers[5].data.getSource();
      this.layers[5].data.setVisible(this.layers[5].isVisible);
      vectorSrc.addFeatures(features);
    });

    // FIXME this is hardwired for now
    var featureRequest6 = new WFS().writeGetFeature({
      srsName: "EPSG:3857",
      featureNS: "gemma",
      featurePrefix: "gemma",
      featureTypes: ["distance_marks"],
      outputFormat: "application/json"
    });

    HTTP.post(
      "/internal/wfs",
      new XMLSerializer().serializeToString(featureRequest6),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(response => {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = this.layers[6].data.getSource();
      vectorSrc.addFeatures(features);
    });
  }
};
</script>