<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 {
  or as orFilter,
  and as andFilter,
  greaterThanOrEqualTo,
  lessThanOrEqualTo,
  equalTo as equalToFilter
} from "ol/format/filter";
//import { displayError } from "@/lib/errors";
import { mapGetters } from "vuex";
import VectorSource from "ol/source/Vector";
import { buildVectorLoader } from "@/components/layers/layers.js";
import { bbox as bboxStrategy } from "ol/loadingstrategy";
import { WFS } from "ol/format";
import { HTTP } from "@/lib/http";

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);
    });
    const fairwaydimensionLayer = this.openLayersMap().getLayer(
      "FDREVIEWLAYER"
    );
    const source = new VectorSource({ strategy: bboxStrategy });
    this.$store.commit("map/reviewActive", true);
    fairwaydimensionLayer.setVisible(true);
    source.setLoader(
      buildVectorLoader(
        {
          geometryName: "area",
          featureTypes: ["fairway_dimensions"],
          filter: andFilter(
            lessThanOrEqualTo("valid_from", new Date().toISOString()),
            greaterThanOrEqualTo("valid_to", new Date().toISOString()),
            orFilter(...ids)
          )
        },
        source,
        false
      )
    );
    fairwaydimensionLayer.setSource(source);
    getFromWFS("fairway_dimensions", ids[0]).then(response => {
      const {
        level_of_service,
        source_organization
      } = response.data.features[0].properties;
      this.LOS = level_of_service;
      this.organization = source_organization;
    });
  },
  computed: {
    ...mapGetters("map", ["openLayersMap"]),
    fairWayDimensionIDs() {
      return this.summary["fd-area"].map(e => e.id);
    }
  }
};
</script>