<template>
  <div class="text-left">
    <div>
      <div class="p-2 pb-3 border-bottom">
        <small class="text-muted">
          <translate>Import type</translate>
        </small>
        <select
          v-model="Import"
          class="custom-select custom-select-sm"
          id="importtype"
        >
          <optgroup :label="regularLabel">
            <option :value="$options.IMPORTTYPES.WATERWAYAREA">
              <translate>Waterway area</translate>
            </option>
            <option :value="$options.IMPORTTYPES.WATERWAYAXIS">
              <translate>Waterway axis</translate>
            </option>
            <option :value="$options.IMPORTTYPES.FAIRWAYDIMENSION">
              <translate>Fairway dimension</translate>
            </option>
            <option :value="$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL">
              <translate>Distance marks virtual</translate>
            </option>
            <option :value="$options.IMPORTTYPES.DISTANCEMARKSASHORE">
              <translate>Distance marks ashore</translate>
            </option>
            <option :value="$options.IMPORTTYPES.WATERWAYGAUGES">
              <translate>Waterway gauges</translate>
            </option>
            <option :value="$options.IMPORTTYPES.BOTTLENECK">
              <translate>Bottlenecks</translate>
            </option>
            <option :value="$options.IMPORTTYPES.FAIRWAYAVAILABILITY">
              <translate>Available fairway depths</translate>
            </option>
            <option :value="$options.IMPORTTYPES.GAUGEMEASUREMENT">
              <translate>Gauge measurement</translate>
            </option>
          </optgroup>
          <optgroup :label="onetimeLabel">
            <option :value="$options.IMPORTTYPES.SOUNDINGRESULTS">
              <translate>Soundingresults</translate>
            </option>
            <option :value="$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS">
              <translate>Approved Gaugemeasurements</translate>
            </option>
            <option :value="$options.IMPORTTYPES.WATERWAYPROFILES">
              <translate>Waterway Profiles</translate>
            </option>
          </optgroup>
        </select>
      </div>
      <ApprovedGaugeMeasurement
        v-if="Import === $options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS"
        class="mt-1"
      />
      <WaterwayProfiles
        class="mt-1"
        v-if="Import === $options.IMPORTTYPES.WATERWAYPROFILES"
      />
      <SoundingResults
        class="mt-1"
        v-if="Import === $options.IMPORTTYPES.SOUNDINGRESULTS"
      />
      <ScheduledImports
        class="mt-1"
        v-if="Import && !isOnetime"
      ></ScheduledImports>
    </div>
    <div v-if="!Import" class="p-2">
      <button :key="1" @click="back()" class="btn btn-sm btn-warning">
        Back
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped></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, 2019 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Tom Gottfried <tom.gottfried@intevation.de>
 */
import { IMPORTTYPES } from "@/store/importschedule";
import { mapState } from "vuex";
export default {
  components: {
    ApprovedGaugeMeasurement: () => import("./types/ApprovedGaugeMeasurement"),
    WaterwayProfiles: () => import("./types/WaterwayProfiles"),
    SoundingResults: () => import("./types/Soundingresults"),
    ScheduledImports: () => import("./ScheduledImports")
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("importschedule", ["currentSchedule"]),
    isOnetime() {
      for (let kind of [
        this.$options.IMPORTTYPES.SOUNDINGRESULTS,
        this.$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS,
        this.$options.IMPORTTYPES.WATERWAYPROFILES
      ]) {
        if (kind === this.currentSchedule.importType) return true;
      }
      return false;
    },
    Import: {
      get() {
        return this.currentSchedule.importType;
      },
      set(value) {
        this.$store.commit("importschedule/setImportType", value);
      }
    },
    onetimeLabel() {
      return this.$gettext("Onetime Imports");
    },
    regularLabel() {
      return this.$gettext("Regular Imports");
    }
  },
  methods: {
    back() {
      this.$store.commit("importschedule/setListMode");
    }
  },
  IMPORTTYPES: IMPORTTYPES
};
</script>