<template>
  <div>
    <div class="d-flex px-2">
      <div class="flex-column w-100">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>URL</translate> </small>
        </div>
        <div class="w-100">
          <input
            @input="urlChanged"
            class="url form-control form-control-sm"
            type="url"
            :value="url"
          />
        </div>
      </div>
    </div>
    <div class="d-flex px-2">
      <div class="flex-column w-100">
        <div class="flex-row text-left">
          <small class="text-muted">
            <translate>Type of mark</translate>
          </small>
        </div>
        <div class="w-50 mt-2">
          <template v-if="isUpdate">
            <select v-model="selectedMark" class="form-control form-control-sm">
              <option
                v-for="(option, value) in $options.FAIRWAYMARKS"
                :key="value"
                :value="value"
                >{{ option }}</option
              >
            </select>
          </template>
          <template v-else="">
            <span class="pl-1">{{ selectedMark }}</span>
          </template>
        </div>
      </div>
    </div>
    <div class="d-flex px-2">
      <div class="flex-column mt-2 mr-3 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>Featuretype</translate> </small>
        </div>
        <div class="w-100">
          <input
            @input="featureTypeChanged"
            class="featuretype form-control form-control-sm"
            type="text"
            :value="featureType"
          />
        </div>
        <div v-if="!featureType" class="d-flex flex-row">
          <small
            ><translate class="text-danger"
              >Please enter a Featuretype</translate
            ></small
          >
        </div>
      </div>
      <div class="flex-column mt-2 w-50">
        <div class="flex-row text-left">
          <small class="text-muted"> <translate>SortBy</translate> </small>
        </div>
        <div class="w-100">
          <input
            @input="sortByChanged"
            class="sortby form-control form-control-sm"
            type="text"
            :value="sortBy"
          />
        </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, 2019, 2020 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import app from "@/main";

export default {
  name: "fairwaymarks",
  props: ["url", "featureType", "sortBy", "mark", "isUpdate"],
  computed: {
    selectedMark: {
      get() {
        return this.mark;
      },
      set(value) {
        this.selected = value;
        this.$emit("selectedMarkChanged", value);
      }
    }
  },
  methods: {
    urlChanged(e) {
      this.$emit("urlChanged", e.target.value);
    },
    featureTypeChanged(e) {
      this.$emit("featureTypeChanged", e.target.value);
    },
    sortByChanged(e) {
      this.$emit("sortByChanged", e.target.value);
    }
  },
  FAIRWAYMARKS: {
    // Feature types not available from d4d wfs source are not selectable.
    // bcnisd: app.$gettext("Beacon, isolated danger (MARITIME/Hydro feature)"),
    // bcnlat_hydro: app.$gettext("Beacon, lateral (MARITIME/Hydro feature)"),
    bcnlat_ienc: app.$gettext("Beacon, lateral (IENC feature)"),
    boycar: app.$gettext("Buoy, cardinal (MARITIME/Hydro feature)"),
    // boyisd: app.$gettext("Buoy, isolated danger (MARITIME/Hydro feature)"),
    boylat_hydro: app.$gettext("Buoy, lateral (MARITIME/Hydro feature)"),
    boylat_ienc: app.$gettext("Buoy, lateral (IENC feature)"),
    boysaw: app.$gettext("Buoy, safe water (MARITIME/Hydro feature)"),
    boyspp: app.$gettext(
      "Buoy, special purpose/general (MARITIME/Hydro feature)"
    ),
    daymar_hydro: app.$gettext("Daymark (MARITIME/Hydro feature)"),
    daymar_ienc: app.$gettext("Daymark (IENC feature)"),
    lights: app.$gettext("Light (MARITIME/Hydro feature)"),
    rtpbcn: app.$gettext("Radar transponder beacon (MARITIME/Hydro feature)"),
    topmar: app.$gettext("Topmark (MARITIME/Hydro feature)"),
    notmrk: app.$gettext("Notice mark (IENC feature)")
  }
};
</script>

<style></style>