<template>
    <div v-if="showImportSoundingResults">
        <div class="imports shadow d-flex content flex-column ui-element">
            <div class="card importcard">
                <div class="card-body importcardbody">
                    <div
                        @click="$store.commit('application/showImportSoundingResults', !showImportSoundingResults);"
                        class="ui-element close-showImportSoundingResults"
                    >
                        <i class="fa fa-close"></i>
                    </div>
                    <div class="card-title mb-4 headline">
                        <h4>Import soundingresults</h4>
                        <hr>
                    </div>
                    <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="uploadFile"
                            >
                            <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label>
                        </div>
                    </div>
                    <div class="downloadbtn">
                        <a
                            download="meta.json"
                            :href="dataLink "
                            class="btn btn-outline-info"
                        >Generate Meta.json</a>
                        <button
                            :disabled="disableUpload"
                            @click="submitUpload"
                            class="btn btn-info"
                            type="button"
                        >Upload!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { HTTP } from "../application/lib/http";
import { displayError, displayInfo } from "../application/lib/errors.js";
import { mapState } from "vuex";

const defaultLabel = "Choose file";

export default {
  name: "imports",
  data() {
    return {
      depthReference: "",
      bottleneck: "",
      importDate: "",
      uploadLabel: defaultLabel,
      uploadFile: null,
      disableUpload: false
    };
  },
  methods: {
    fileSelected(e) {
      const files = e.target.files || e.dataTransfer.files;
      if (!files) return;
      this.uploadLabel = files[0].name;
      this.uploadFile = files[0];
    },
    submitUpload() {
      if (!this.uploadFile || this.disableUpload) return;
      let formData = new FormData();
      formData.append("files[0]", this.uploadFile);
      HTTP.post("/imports/soundingresult", formData, {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-Type": "multipart/form-data"
        }
      })
        .then(() => {
          displayInfo({
            title: "Import success"
          });
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: "Backend Error",
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  computed: {
    ...mapState("application", ["showImportSoundingResults"]),
    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="sass" scoped>
.close-showImportSoundingResults
  position: absolute
  z-index: 2
  right: 0
  top: 7px
  border-radius: $border-radius
  height: $icon-width
  width: $icon-height
  
.label-text
  width: 10rem
  text-align: left
  line-height: 2.25rem

.importcard
  height: 100%
  
.importcardbody
  position: relative
  height: 100%
  width: 90%
  margin-left: auto
  margin-right: auto
  
.imports
  position: relative
  background-color: white
  width: 30rem
  height: 28rem
  margin-left: auto
  margin-right: auto
  border-radius: $border-radius
  opacity: $slight-transparent
  
.downloadbtn
  position: absolute
  right: $offset
  bottom: $offset

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