<template>
  <div
    :class="[
      'box ui-element rounded bg-white text-nowrap',
      { expanded: showFairwayDepth }
    ]"
  >
    <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 align-items-center"
        >
          <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
            :key="1"
            v-if="type === $options.BOTTLENECKS"
            @change="entrySelected"
            class="form-control form-control-sm font-weight-bold"
            v-model="selectedEntry"
          >
            <option :value="null">{{ empty }}</option>
            <optgroup
              v-for="(bottlenecksForCountry, cc) in orderedBottlenecks"
              :key="cc"
              :label="cc"
            >
              <option
                v-for="bn in bottlenecksForCountry"
                :key="bn.properties.name"
                :value="bn"
              >
                {{ bn.properties.name }}
              </option>
            </optgroup>
          </select>
          <select
            :key="2"
            v-else
            @change="entrySelected"
            class="form-control form-control-sm 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="d-flex flex-column mt-3">
          <div class="d-flex flex-row w-100">
            <div class="d-flex flex-column mb-3 w-50 mr-1">
              <small class="my-auto text-muted"
                ><translate>Type</translate></small
              >
              <select
                v-model="selectedFrequency"
                class="form-control form-control-sm"
              >
                <option
                  v-for="(option, index) in $options.FREQUENCIES"
                  :value="option"
                  :key="index"
                  ><translate>{{ option }}</translate></option
                >
              </select>
            </div>
            <div class="d-flex flex-column mb-3 w-50 ml-1">
              <small class="my-auto text-muted"
                ><translate>LOS</translate></small
              >
              <select v-model="los" class="form-control form-control-sm">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>
          </div>
          <div class="d-flex flex-row w-100">
            <div class="d-flex flex-column w-50 mr-1">
              <small for="from" class="my-auto text-muted"
                ><translate>Date from</translate></small
              ><input
                id="from"
                v-model="fromDate"
                class="form-control form-control-sm"
                type="date"
              />
            </div>
            <div class="d-flex flex-column w-50 ml-1">
              <small for="to" class="my-auto text-muted"
                ><translate>Date to</translate></small
              ><input
                id="to"
                v-model="toDate"
                class="form-control form-control-sm"
                type="date"
              />
            </div>
          </div>
        </div>
        <div class="mt-3">
          <button
            @click="openFairwaydepth"
            :disabled="isComplete"
            class="btn btn-info btn-sm w-100"
          >
            <translate>Available Fairway Depth</translate>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
input,
select {
  font-size: 0.8em;
}
</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>
 * Thomas Junk <thomas.junk@intevation.de>
 */

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

export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    openFairwaydepth() {
      this.loading = true;
      this.$store
        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
          feature: this.selectedFairwayAvailabilityFeature,
          from: this.from,
          to: this.to,
          frequency: this.frequency,
          LOS: this.los
        })
        .then(() => {
          this.loading = false;
          this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
        })
        .catch(error => {
          console.log(error);
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    close() {
      this.$store.commit("application/showFairwayDepth", false);
    },
    entrySelected() {
      if (this.type === this.$options.BOTTLENECKS) {
        this.openLayersMap()
          .getLayer("BOTTLENECKS")
          .setVisible(true);
        if (this.showProfiles) {
          this.$store.dispatch(
            "bottlenecks/setSelectedBottleneck",
            this.selectedFairwayAvailabilityFeature.properties.name
          );
        }
      }
      if (this.type === this.$options.STRETCHES) {
        this.openLayersMap()
          .getLayer("STRETCHES")
          .setVisible(true);
      }
      if (this.selectedFairwayAvailabilityFeature) {
        this.$store.dispatch("map/moveToFeauture", {
          feature: this.selectedFairwayAvailabilityFeature,
          zoom: 17,
          preventZoomOut: true
        });
      }
    },
    setSelectedBottleneck() {
      const bn = this.bottlenecksList.filter(
        x => x.properties.name === this.selectedBottleneck
      )[0];
      this.$store.commit(
        "fairwayavailability/setSelectedFairwayAvailability",
        bn
      );
    }
  },
  computed: {
    ...mapState("application", [
      "showFairwayDepth",
      "paneSetup",
      "showProfiles"
    ]),
    ...mapState("fairwayavailability", [
      "selectedFairwayAvailabilityFeature",
      "from",
      "to",
      "frequency",
      "LOS"
    ]),
    ...mapState("imports", ["stretches"]),
    ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
    ...mapGetters("map", ["openLayersMap"]),
    ...mapGetters("bottlenecks", ["orderedBottlenecks"]),
    isComplete() {
      return (
        this.from == null ||
        this.to == null ||
        this.frequency == null ||
        this.los == null ||
        this.selectedFairwayAvailabilityFeature == null
      );
    },
    type: {
      get() {
        return this.$store.state.fairwayavailability.type;
      },
      set(type) {
        this.$store.commit("fairwayavailability/type", type);
      }
    },
    los: {
      get() {
        return this.LOS;
      },
      set(value) {
        this.$store.commit("fairwayavailability/setLOS", value);
      }
    },
    fromDate: {
      get() {
        return this.from;
      },
      set(value) {
        this.$store.commit("fairwayavailability/setFrom", value);
      }
    },
    toDate: {
      get() {
        return this.to;
      },
      set(value) {
        this.$store.commit("fairwayavailability/setTo", value);
      }
    },
    selectedFrequency: {
      get() {
        return this.frequency;
      },
      set(value) {
        this.$store.commit("fairwayavailability/setFrequency", value);
      }
    },
    selectedEntry: {
      get() {
        return this.selectedFairwayAvailabilityFeature;
      },
      set(feature) {
        this.$store.commit(
          "fairwayavailability/setSelectedFairwayAvailability",
          feature
        );
      }
    },
    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 stretch");
      return this.$gettext("Select section");
    }
  },
  watch: {
    selectedBottleneck() {
      this.type = this.$options.BOTTLENECKS;
      this.setSelectedBottleneck();
    },
    type() {
      if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
        this.setSelectedBottleneck();
      } else {
        this.$store.commit(
          "fairwayavailability/setSelectedFairwayAvailability",
          null
        );
      }
      this.openLayersMap()
        .getLayer("STRETCHES")
        .setVisible(true);
    },
    showFairwayDepth() {
      if (this.showFairwayDepth) {
        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"),
  FREQUENCIES: {
    MONTHLY: "monthly",
    QUARTERLY: "quarterly",
    YEARLY: "yearly"
  }
};
</script>