<template>
  <div class="mapdisplay">
    <div id="map"></div>
    <div v-if="this.openLayersMap" class="card layerselection shadow">
      <div class="card-body">
        <div class="headline">
          <h4 class="card-title">Layers</h4>
        </div>
        <hr>
        <div class="d-flex flex-column">
          <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
        </div>
      </div>
    </div>
    <div class="profile d-flex flex-row">
      <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 6]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
    </div>
  </div>
</template>

<style lang="scss">
@import "../assets/application.scss";

.profile {
  background-color: white;
  height: 50vh-$topbarheight;
}

.mapdisplay {
  height: 100%;
}

#map {
  margin-top: $topbarheight;
  height: 50vh;
}

.layerselection {
  position: absolute;
  top: 40px + $small-offset;
  margin-top: $small-offset;
  right: $small-offset;
  min-height: 20%;
  min-width: 10%;
  background-color: white;
  z-index: 10;
}
</style>

<script>
import { HTTP } from "../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 { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import VectorSource from "ol/source/Vector.js";
import { Stroke, Style } from "ol/style.js";
import OSM from "ol/source/OSM";
import TileWMS from "ol/source/TileWMS.js";
import Layerselect from "./Layerselect";
import Fairwayprofile from "./Fairwayprofile";

export default {
  name: "maplayer",
  props: ["lat", "long", "zoom"],
  components: {
    Layerselect,
    Fairwayprofile
  },
  data() {
    return {
      projection: "EPSG:3857",
      openLayersMap: null,
      layers: [
        {
          name: "Open Streetmap",
          data: new TileLayer({
            source: new OSM()
          }),
          isVisible: true
        },
        {
          name: "D4D",
          data: new TileLayer({
            source: new TileWMS({
              url: "https://demo.d4d-portal.info/wms",
              params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
            })
          }),
          isVisible: true
        },
        {
          name: "Fairways Dimensions",
          data: new VectorLayer({
            source: new VectorSource(),
            style: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 1.0)",
                width: 2
              })
            })
          }),
          isVisible: true
        }
      ]
    };
  },
  computed: {
    layerData() {
      return this.layers.map(x => {
        return x.data;
      });
    }
  },
  methods: {
    visibilityToggled(layer) {
      this.layers[layer].isVisible = !this.layers[layer].isVisible;
      this.layers[layer].data.setVisible(this.layers[layer].isVisible);
    }
  },
  mounted() {
    var that = this;
    this.openLayersMap = new Map({
      layers: this.layerData,
      target: "map",
      view: new View({
        center: [this.long, this.lat],
        zoom: this.zoom,
        projection: this.projection
      })
    });

    var featureRequest = 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(featureRequest),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    ).then(function(response) {
      var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
      var vectorSrc = that.layers[2].data.getSource();
      vectorSrc.addFeatures(features);
      // would scale to the extend of all resulting features
      // that.openLayersMap.getView().fit(vectorSrc.getExtent());
    });
  }
};
</script>