<template>
  <div
    class="d-flex flex-column flex-start px-2 border-bottom"
    style="border-bottom-style: dashed !important;"
  >
    <div class="d-flex">
      <input
        v-for="map in openLayersMaps"
        :key="map.getTarget()"
        class="mt-1 mr-1"
        type="checkbox"
        @change="toggle(map)"
        :checked="isVisible(map)"
      />
      <LegendElement class="pointer" :layer="layer" @click.native="toggle()" />
      <label class="pointer layername form-check-label ml-1" @click="toggle()">
        {{ label }}
      </label>
    </div>
    <div>
      <div v-if="isVisible() && layer.get('id') === 'BOTTLENECKISOLINE'">
        <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" />
      </div>
      <div v-if="isVisible() && layer.get('id') === 'DIFFERENCES'">
        <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" />
      </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, 2019 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * * Thomas Junk <thomas.junk@intevation.de>
 * * Bernhard Reiter <bernhard.reiter@intevation.de>
 */
import { HTTP } from "@/lib/http";
import { displayError } from "@/lib/errors";
import { mapState, mapGetters } from "vuex";

export default {
  components: {
    LegendElement: () => import("./LegendElement")
  },
  props: ["layerId"],
  computed: {
    ...mapState("map", [
      "openLayersMaps",
      "isolinesLegendImgDataURL",
      "differencesLegendImgDataURL",
      "ongoingRefresh"
    ]),
    ...mapGetters("map", ["openLayersMap"]),
    ...mapState("bottlenecks", ["selectedSurvey"]),
    layer() {
      return this.openLayersMap().getLayer(this.layerId);
    },
    label() {
      return this.$gettext(this.layer.get("label"));
    }
  },
  watch: {
    ongoingRefresh() {
      if (this.ongoingRefresh) return;
      this.refreshLegend();
    }
  },
  methods: {
    refreshLegend() {
      if (this.layer.get("id") === "BOTTLENECKISOLINE") {
        this.loadLegendImage(
          "sounding_results_areas_geoserver",
          "isolinesLegendImgDataURL"
        );
      }
      if (this.layer.get("id") === "DIFFERENCES") {
        this.loadLegendImage(
          "sounding_differences",
          "differencesLegendImgDataURL"
        );
      }
    },
    toggle(map) {
      if (map) {
        if (
          (this.layerId === "BOTTLENECKISOLINE" ||
            this.layerId === "DIFFERENCES") &&
          !this.selectedSurvey
        ) {
          map
            .getLayer(this.layerId)
            .getSource()
            .updateParams({
              cql_filter: `bottleneck_id='NO_BOTTLENECK_SELECTED'`
            });
        }
        map
          .getLayer(this.layerId)
          .setVisible(!map.getLayer(this.layerId).getVisible());
        if (
          this.layerId === "GAUGES" ||
          this.layerId === "STRETCHES" ||
          this.layerId === "BOTTLENECKS" ||
          this.layerId === "SECTIONS"
        ) {
          map.getLayer("DATAAVAILABILITY").changed();
        }
      } else {
        this.openLayersMaps.forEach(m => {
          m.getLayer(this.layerId).setVisible(
            !m.getLayer(this.layerId).getVisible()
          );
        });
      }
    },
    isVisible(map) {
      if (map) {
        return map.getLayer(this.layerId).getVisible();
      } else {
        let isVisible = false;
        this.openLayersMaps.forEach(m => {
          if (m.getLayer(this.layerId).getVisible()) {
            isVisible = true;
          }
        });
        return isVisible;
      }
    },
    loadLegendImage(layer, storeTarget) {
      HTTP.get(
        `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.3.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${layer}&legend_options=columns:4;fontAntiAliasing:true&SCALE=5000`,
        {
          headers: {
            Accept: "image/png",
            "X-Gemma-Auth": localStorage.getItem("token")
          },
          responseType: "blob"
        }
      )
        .then(response => {
          const reader = new FileReader();
          reader.onload = event => {
            this.$store.commit("map/" + storeTarget, event.target.result);
          };
          reader.readAsDataURL(response.data);
        })
        .catch(error => {
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${error.response.status}: ${error.response.statusText}`
          });
        });
    }
  },
  created() {
    this.refreshLegend();
  }
};
</script>