<template>
  <div
    :class="[
      'box ui-element rounded bg-white text-nowrap',
      { expanded: showGauges }
    ]"
  >
    <div style="width: 18rem">
      <UIBoxHeader
        icon="ruler-vertical"
        title="Gauges"
        :closeCallback="close"
      />
      <div class="box-body">
        <div
          class="loading d-flex justify-content-center align-items-center"
          v-if="loading"
        >
          <font-awesome-icon icon="spinner" spin />
        </div>
        <select
          @change="moveToGauge"
          v-model="selectedGaugeName"
          class="form-control font-weight-bold"
        >
          <option :value="null">
            <translate>Select Gauge</translate>
          </option>
          <option
            v-for="g in gauges"
            :key="g.properties.objname"
            :value="g.properties.objname"
          >
            {{ g.properties.objname }}
          </option>
        </select>
        <div v-if="selectedGaugeName" class="mt-2">
          <hr class="mb-1" />
          <small class="text-muted">
            <translate>Time period</translate>:
          </small>
          <select
            v-model="waterlevelsTimePeriod"
            class="form-control form-control-sm mb-2"
          >
            <option value="day">last day</option>
            <option value="week">last week</option>
            <option value="month">last month</option>
            <option value="year">last year</option>
          </select>
          <button
            @click="showWaterlevelDiagram()"
            class="btn btn-sm btn-info d-block w-100"
          >
            <translate>Show Waterlevels</translate>
          </button>
          <hr />
          <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled>
            <translate>Show Hydrological Conditions</translate>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loading {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

<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.kottlaender@intevation.de>
 */
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      loading: false,
      waterlevelsTimePeriod: "day"
    };
  },
  computed: {
    ...mapState("application", ["showGauges"]),
    ...mapState("gauges", ["gauges"]),
    ...mapGetters("gauges", ["selectedGauge"]),
    selectedGaugeName: {
      get() {
        return this.$store.state.gauges.selectedGaugeName;
      },
      set(name) {
        this.$store.dispatch("gauges/selectedGaugeName", name);
      }
    }
  },
  methods: {
    close() {
      this.$store.commit("application/showGauges", false);
    },
    moveToGauge() {
      if (!this.selectedGauge) return;
      this.$store.commit("map/moveToExtent", {
        feature: this.selectedGauge,
        zoom: 17,
        preventZoomOut: true
      });
    },
    showWaterlevelDiagram() {
      // configure splitscreen
      let splitscreenConf = {
        id: "gauge-waterlevel",
        component: "waterlevel",
        title: this.selectedGaugeName,
        icon: "ruler-vertical",
        closeCallback: () => {
          this.$store.commit("gauges/selectedGaugeName", null);
          this.$store.commit("gauges/waterlevels", []);
        },
        expandCallback: () => {
          this.$store.commit("map/moveMap", {
            coordinates: this.selectedGauge.geometry.coordinates,
            zoom: 17,
            preventZoomOut: true
          });
        }
      };
      this.$store.commit("application/addSplitscreen", splitscreenConf);
      this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
      this.$store.commit("application/splitscreenLoading", true);
      this.loading = true;
      this.$store.commit("application/showSplitscreen", true);
      this.$store
        .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod)
        .then(() => {
          this.$store.commit("application/splitscreenLoading", false);
          this.loading = false;
        });
    }
  },
  mounted() {
    this.$store.dispatch("gauges/loadGauges");
  }
};
</script>