<template>
  <div :id="id" class="bg-light shadow-sm rounded legendelement"></div>

</template>

<script>
import { mapGetters } from "vuex";

import { Map, View } from "ol";
import Feature from "ol/Feature";
import { Vector as VectorLayer } from "ol/layer.js";
import { Vector as VectorSource } from "ol/source.js";
import LineString from "ol/geom/LineString.js";
import Point from "ol/geom/Point";

export default {
  name: "legendelement",
  props: ["layername", "layerindex"],
  data: function() {
    return {
      mapLayer: null
    };
  },
  computed: {
    ...mapGetters("mapstore", ["getLayerByName"]),
    id() {
      return "legendelement" + this.layerindex;
    }
  },
  mounted() {
    this.mapLayer = this.getLayerByName(this.layername);
    if (this.mapLayer.data.getType() == "VECTOR") {
      this.initMap();
    } else {
      // TODO other tiles
    }
  },
  methods: {
    initMap() {
      let mapStyle = this.mapLayer.data.getStyle();

      let feature = new Feature({
        geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]])
      });

      // special case if we need to call the style function with a special
      // parameter or to detect a point layer
      if (this.mapLayer["forLegendStyle"]) {
        if (this.mapLayer.forLegendStyle.point) {
          feature.setGeometry(new Point([0, 0]));
        }
        mapStyle = this.mapLayer.data.getStyleFunction()(
          feature,
          this.mapLayer.forLegendStyle.resolution
        );
      }

      // we could add extra properties here, if they are needed for
      // the styling function in the future. An idea is to extend the
      // this.mapLayer["forLegendStyle"] for it.
      // FIXME, this is a special case for the Fairway Dimensions style
      feature.set("level_of_service", "");
      var vector = new VectorLayer({
        source: new VectorSource({
          features: [feature],
          wrapX: false
        }),
        style: mapStyle
      });

      new Map({
        layers: [vector],
        target: this.id,
        controls: [],
        interactions: [],
        view: new View({
          center: [0, 0],
          zoom: 3,
          projection: "EPSG:4326"
        })
      });
    }
  }
};
</script>

<style scoped>
.legendelement {
  max-height: 1.5rem;
  width: 2rem;
}
</style>