<template>
  <div class="bottleneckdetails">
    <div
      v-for="(bottleneck, index) in bottlenecks"
      :key="index"
      class="d-flex flex-row"
    >
      <div class="d-flex flex-column">
        <div class="d-flex flex-row">
          <div
            @click="showBottleneckDetails(index)"
            class="mt-auto mb-auto text-info text-left"
          >
            <font-awesome-icon
              class="pointer"
              v-if="showBottleneckDetail === index"
              icon="angle-down"
              fixed-width
            ></font-awesome-icon>
            <font-awesome-icon
              class="pointer"
              v-if="!(showBottleneckDetail === index)"
              icon="angle-right"
              fixed-width
            ></font-awesome-icon>
          </div>
          <a @click="moveToBottleneck(index)" class="small" href="#">{{
            bottleneck.properties.objnam
          }}</a>
        </div>

        <div class="ml-3 d-flex flex-row" v-if="showBottleneckDetail === index">
          <table>
            <tr
              v-for="(info, index) in Object.keys(bottleneck.properties)"
              :key="index"
              class="mr-1 condensed small text-muted"
            >
              <td class="text-left">{{ info }}</td>
              <td class="pl-3 text-left">
                {{ bottleneck.properties[info] }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </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 { LAYERS } from "@/store/map.js";
import { HTTP } from "@/lib/http";
import { WFS } from "ol/format.js";
import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js";
import { displayError } from "@/lib/errors.js";

const NO_BOTTLENECK = -1;

export default {
  name: "bottleneckdetails",
  props: ["entry", "details"],
  data() {
    return {
      bottlenecks: [],
      showBottleneckDetail: NO_BOTTLENECK
    };
  },
  mounted() {
    this.loadBottlenecks();
  },
  methods: {
    loadBottlenecks() {
      const generateFilter = () => {
        const { bottlenecks } = this.details.summary;
        if (bottlenecks.length === 1)
          return equalToFilter("bottleneck_id", bottlenecks[0]);
        const orExpressions = bottlenecks.map(x => {
          return equalToFilter("bottleneck_id", x);
        });
        return orFilter(...orExpressions);
      };
      const filterExpression = generateFilter();
      const bottleneckFeatureCollectionRequest = new WFS().writeGetFeature({
        srsName: "EPSG:4326",
        featureNS: "gemma",
        featurePrefix: "gemma",
        featureTypes: ["bottlenecks_geoserver"],
        outputFormat: "application/json",
        filter: filterExpression
      });
      HTTP.post(
        "/internal/wfs",
        new XMLSerializer().serializeToString(
          bottleneckFeatureCollectionRequest
        ),
        {
          headers: {
            "X-Gemma-Auth": localStorage.getItem("token"),
            "Content-type": "text/xml; charset=UTF-8"
          }
        }
      )
        .then(response => {
          this.bottlenecks = response.data.features;
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    moveToBottleneck(index) {
      this.$store.commit("map/setLayerVisible", LAYERS.BOTTLENECKS);
      this.moveToExtent(this.bottlenecks[index]);
    },
    moveToExtent(feature) {
      this.$store.commit("map/moveToExtent", {
        feature: feature,
        zoom: 17,
        preventZoomOut: true
      });
    },
    showBottleneckDetails(index) {
      if (index == this.showBottleneckDetail) {
        this.showBottleneckDetail = NO_BOTTLENECK;
        return;
      }
      this.showBottleneckDetail = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.bottleneckdetails {
  width: 615px;
  max-height: 15vh;
  overflow-y: auto;
}
</style>