<template>
  <div class="d-flex flex-column">
    <div>
      Fairwaydimensions
    </div>
    <template v-if="LOS">
      <span class="ml-2 mt-1">LOS: {{ LOS }}</span>
      <span class="ml-2 mb-3"
        ><translate>Source</translate>: {{ organization }}</span
      >
    </template>
  </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):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { HTTP } from "@/lib/http";
import { WFS } from "ol/format";
import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter";
//import { displayError } from "@/lib/errors";
import { mapGetters } from "vuex";
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import { transform } from "ol/proj";

const getFromWFS = (type, filter) => {
  return new Promise((resolve, reject) => {
    var featureCollectionRequest = new WFS().writeGetFeature({
      srsName: "EPSG:4326",
      featureNS: "gemma",
      featurePrefix: "gemma",
      featureTypes: [type],
      outputFormat: "application/json",
      filter: filter
    });
    HTTP.post(
      "/internal/wfs",
      new XMLSerializer().serializeToString(featureCollectionRequest),
      {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }
    )
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

export default {
  props: ["summary"],
  data() {
    return {
      organization: "",
      LOS: ""
    };
  },
  mounted() {
    const ids = this.fairWayDimensionIDs.map(id => {
      return equalToFilter("id", id);
    });
    getFromWFS("fairway_dimensions", orFilter(...ids)).then(response => {
      let { features } = response.data;
      if (features.length < 0) {
        const {
          level_of_service,
          source_organization
        } = features[0].properties;
        this.LOS = level_of_service;
        this.organization = source_organization;
        const fairwaydimensionLayer = this.openLayersMap().getLayer(
          "FDREVIEWLAYER"
        );
        features = features.map(f => {
          let result = new Feature({
            geometry: new Polygon([
              f.geometry.coordinates[0].map(c =>
                transform(c, "EPSG:4326", "EPSG:3857")
              )
            ])
          });
          result.setId(f.id);
          return result;
        });
        this.$store.commit("map/reviewActive", true);
        fairwaydimensionLayer.setVisible(true);
        fairwaydimensionLayer.getSource().addFeatures(features);
      }
    });
  },
  computed: {
    ...mapGetters("map", ["openLayersMap"]),
    fairWayDimensionIDs() {
      return this.summary["fd-area"].map(e => e.id);
    }
  }
};
</script>