<template>
  <div class="d-flex flex-column pb-4 border-bottom">
    <h5 class="py-2 px-3 mb-2 m-0"><translate>Map Layers</translate></h5>
    <div class="px-3 container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="ecdis-url" class="font-weight-bold">
              ECDIS WMS URL
            </label>
            <input
              type="url"
              class="form-control"
              placeholder="https://..."
              @input="lookupWMSCapabilities()"
              v-model="config.ecdis_url"
            />
          </div>
          <label for="ecdis-layers">
            <translate>Layers</translate>
            <transition name="fade"
              ><font-awesome-icon
                icon="spinner"
                spin
                v-if="availableWMSLayersLoading"
                class="ml-2"
            /></transition>
          </label>
          <div class="container-fluid">
            <div class="row">
              <div
                class="custom-control custom-checkbox col-sm-3"
                v-for="layer in availableWMSLayers"
                :key="'layer-' + layer"
              >
                <input
                  type="checkbox"
                  class="custom-control-input"
                  v-model="selectedWMSLayers"
                  :id="'layer-' + layer"
                  :value="layer"
                />
                <label class="custom-control-label" :for="'layer-' + layer">
                  {{ layer }}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 px-3">
      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
        <translate>Send</translate>
      </a>
    </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):
 * Markus Kottländer <markus@intevation.de>
 */
import { mapState } from "vuex";
import WMSCapabilities from "ol/format/WMSCapabilities";
import { HTTP } from "@/lib/http";

const WMSCapabilitiesParser = new WMSCapabilities();

export default {
  data() {
    return {
      selectedWMSLayers: [],
      availableWMSLayers: [],
      availableWMSLayersLoading: false,
      lookupWMSCapabilitiesTimeout: null
    };
  },
  computed: {
    ...mapState("application", ["config"])
  },
  methods: {
    lookupWMSCapabilities() {
      if (this.lookupWMSCapabilitiesTimeout) {
        clearTimeout(this.lookupWMSCapabilitiesTimeout);
      }
      this.lookupWMSCapabilitiesTimeout = setTimeout(() => {
        let url;
        try {
          let urlParts = new URL(this.config.ecdis_url);
          url =
            urlParts.protocol +
            "//" +
            urlParts.host +
            urlParts.pathname.trim("/") +
            "/";
        } catch (e) {
          url = this.config.ecdis_url;
        }
        this.availableWMSLayersLoading = true;
        HTTP.get(url + "?request=GetCapabilities&service=WMS")
          .then(response => {
            let capabilities = WMSCapabilitiesParser.read(response.data);
            let layers = [];
            capabilities.Capability.Layer.Layer.forEach(l =>
              layers.push(l.Name)
            );
            this.availableWMSLayers = layers;
          })
          .catch(() => {
            this.availableWMSLayers = [];
          })
          .finally(() => (this.availableWMSLayersLoading = false));
      }, 500);
    },
    submit() {
      this.$store.dispatch("application/saveConfig", {
        ecdis_url: this.config.ecdis_url,
        ecdis_layers: this.selectedWMSLayers
          .filter(l => this.availableWMSLayers.includes(l))
          .join(",")
      });
    }
  },
  mounted() {
    this.selectedWMSLayers = this.config.ecdis_layers.split(",");
    this.lookupWMSCapabilities();
  }
};
</script>