<template>
    <div>
        <div class="imports shadow d-flex content flex-column">
            <div class="card importcard">
                <div
                    class="card-header shadow-sm text-white bg-info mb-3"
                >Import of sounding results</div>
                <div class="card-body importcardbody">
                    <div class="d-flex flex-row input-group mb-4">
                        <div class="">
                            <label
                                for="bottleneck"
                                class="label-text"
                                id="bottlenecklabel"
                            >Bottleneck</label>
                        </div>
                        <input
                            id="bottleneck"
                            type="text"
                            class="form-control"
                            placeholder="Name of Bottleneck"
                            aria-label="bottleneck"
                            aria-describedby="bottlenecklabel"
                            v-model="bottleneck"
                        >
                    </div>
                    <div class="d-flex flex-row input-group mb-4">
                        <div class="">
                            <label class="label-text" for="importdate" id="importdatelabel">Date</label>
                        </div>
                        <input
                            id="importdate"
                            type="date"
                            class="form-control"
                            placeholder="Date of import"
                            aria-label="bottleneck"
                            aria-describedby="bottlenecklabel"
                            v-model="importDate"
                        >
                    </div>
                    <div class="d-flex flex-row input-group mb-5">
                        <div class="">
                            <label class="label-text" for="depthreference">Depth reference</label>
                        </div>
                        <select v-model="depthReference" class="custom-select" id="depthreference">
                            <option
                                v-for="option in this.$options.depthReferenceOptions"
                                :key="option"
                            >{{option}}</option>
                        </select>
                    </div>
                    <div class="d-flex flex-row input-group mb-5">
                        <div class="custom-file">
                            <input
                                type="file"
                                @change="fileSelected"
                                class="custom-file-input"
                                id="inputGroupFile04"
                            >
                            <label class="custom-file-label" for="inputGroupFile04">{{uploadLabel}}</label>
                        </div>
                    </div>
                    <div class="downloadbtn">
                        <a
                            download="meta.json"
                            :href="dataLink "
                            class="btn btn-outline-info"
                        >Generate Meta.json</a>
                        <button class="btn btn-info" type="button">Upload!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const defaultLabel = "Choose file";

export default {
  name: "imports",
  data() {
    return {
      depthReference: "",
      bottleneck: "",
      importDate: "",
      uploadLabel: defaultLabel
    };
  },
  methods: {
    fileSelected(e) {
      const files = e.target.files || e.dataTransfer.files;
      if (!files) return;
      this.uploadLabel = files[0].name;
    }
  },
  computed: {
    dataLink() {
      return (
        "data:text/json;charset=utf-8," +
        encodeURIComponent(
          JSON.stringify({
            depthReference: this.depthReference,
            bottleneck: this.bottleneck,
            date: this.importDate
          })
        )
      );
    }
  },
  depthReferenceOptions: [
    "",
    "NAP",
    "KP",
    "FZP",
    "ADR",
    "TAW",
    "PUL",
    "NGM",
    "ETRS",
    "POT",
    "LDC",
    "HDC",
    "ZPG",
    "GLW",
    "HSW",
    "LNW",
    "HNW",
    "IGN",
    "WGS",
    "RN",
    "HBO"
  ]
};
</script>

<style lang="scss" scoped>
.label-text {
  width: 10rem;
  text-align: left;
  line-height: 2.25rem;
}
.importcard {
  height: 100%;
}
.importcardbody {
  position: relative;
  height: 100%;
  width: 90%;
  margin: auto;
}
.imports {
  background-color: white;
  width: 40rem;
  height: 28rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: $offset;
}
.downloadbtn {
  position: absolute;
  right: $offset;
  bottom: $offset;
}

.downloadbtn a {
  margin-right: $offset;
}
</style>