<template>
  <div
    :class="[
      'box ui-element rounded bg-white text-nowrap',
      { expanded: showStatistics }
    ]"
  >
    <div style="width: 18rem">
      <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
      <div class="box-body">
        <UISpinnerOverlay v-if="loading" />
        <div class="mb-3 d-flex flex-row justify-content-between">
          <div>
            <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
            <small class="ml-1 text-muted">
              <translate>Bottlenecks</translate>
            </small>
          </div>
          <div>
            <input :value="$options.STRETCHES" type="radio" v-model="type" />
            <small class="ml-1 text-muted">
              <translate>Stretches</translate>
            </small>
          </div>
          <div>
            <input :value="$options.SECTIONS" type="radio" v-model="type" />
            <small class="ml-1 text-muted">
              <translate>Sections</translate>
            </small>
          </div>
        </div>
        <div class="d-flex flex-column">
          <select
            @change="entrySelected"
            class="form-control font-weight-bold"
            v-model="selectedEntry"
          >
            <option :value="null">{{ empty }}</option>
            <option
              v-for="(entry, index) in entries"
              :value="entry"
              :key="index"
              >{{ entry.properties.name }}</option
            >
          </select>
        </div>
        <div class="mt-3">
          <button
            :disabled="selectedEntry == null"
            class="btn btn-info btn-sm w-100"
          >
            <translate>Available Fairway Depth</translate>
          </button>
        </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):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 * Thomas Junk <thomas.junk@intevation.de>
 */

import app from "@/main";
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      type: this.$options.BOTTLENECKS,
      selectedEntry: null,
      loading: false
    };
  },
  methods: {
    close() {
      this.$store.commit("application/showStatistics", false);
    },
    entrySelected() {
      if (this.type === this.$options.BOTTLENECKS) {
        this.openLayersMap()
          .getLayer("BOTTLENECKS")
          .setVisible(true);
        this.$store.dispatch(
          "bottlenecks/setSelectedBottleneck",
          this.selectedEntry.properties.name
        );
      }
      if (this.type === this.$options.STRETCHES) {
        this.openLayersMap()
          .getLayer("STRETCHES")
          .setVisible(true);
      }
      if (this.selectedEntry) {
        this.$store.dispatch("map/moveToFeauture", {
          feature: this.selectedEntry,
          zoom: 17,
          preventZoomOut: true
        });
      }
    },
    setSelectedBottleneck() {
      const bn = this.bottlenecksList.filter(
        x => x.properties.name === this.selectedBottleneck
      )[0];
      this.selectedEntry = bn;
    }
  },
  computed: {
    ...mapState("application", ["showStatistics", "paneSetup"]),
    ...mapState("imports", ["stretches"]),
    ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
    ...mapGetters("map", ["openLayersMap"]),
    entries() {
      if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
      if (this.type === this.$options.STRETCHES) return this.stretches;
      return [];
    },
    label() {
      return this.$gettext("Statistics");
    },
    empty() {
      if (this.type === this.$options.BOTTLENECKS)
        return this.$gettext("Select bottleneck");
      if (this.type === this.$options.STRETCHES)
        return this.$gettext("Select strectch");
      return this.$gettext("Select section");
    }
  },
  watch: {
    selectedBottleneck() {
      this.type = this.$options.BOTTLENECKS;
      this.setSelectedBottleneck();
    },
    type() {
      if (this.selectedBottleneck) {
        this.setSelectedBottleneck();
      } else {
        this.selectedEntry = null;
      }
      this.openLayersMap()
        .getLayer("STRETCHES")
        .setVisible(true);
    },
    showStatistics() {
      if (this.showStatistics) {
        this.loading = true;
        this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => {
          this.$store.dispatch("imports/loadStretches").then(() => {
            this.loading = false;
            if (this.selectedBottleneck) this.setSelectedBottleneck();
          });
        });
      }
    }
  },
  BOTTLENECKS: "bottlenecks",
  SECTIONS: "sections",
  STRETCHES: "stretches",
  AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth")
};
</script>

<style></style>