<template>
    <div :class="importStyle">
        <div
            @click="$store.commit('application/showImportSoundingResults', false);"
            class="ui-element close-imports"
        >
            <i class="fa fa-close"></i>
        </div>
        <h4>Import soundingresults</h4>
        <hr class="mr-auto ml-auto mb-0 w-90">
        <div v-if="editState" class="p-3">
            <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-4">
                <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>
        <div class="uploadsection mr-auto ml-auto mt-4 mb-4">
            <div class="d-flex flex-row input-group mb-4">
                <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 text-right">
                <a
                    v-if="editState"
                    download="meta.json"
                    :href="dataLink "
                    class="btn btn-outline-info mr-2"
                >Generate Meta.json</a>
                <button
                    :disabled="disableUpload"
                    @click="submitUpload"
                    class="btn btn-info"
                    type="button"
                >Upload!</button>
            </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 .zip-file";
const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };

export default {
  name: "imports",
  data() {
    return {
      importState: IMPORTSTATE.UPLOAD,
      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("soundingresult", 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"]),
    editState() {
      return this.importState === IMPORTSTATE.EDIT;
    },
    uploadState() {
      return this.importState === IMPORTSTATE.UPLOAD;
    },
    importStyle() {
      return [
        "ui-element shadow imports ml-3 pt-3 rounded",
        {
          importscollapsed: !this.showImportSoundingResults,
          importsextended: this.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>
.uploadsection
  width: 90%

.imports
  position: relative
  background-color: #ffffff
  opacity: $slight-transparent
  transition: left 0.3s ease
  overflow: hidden
  background: #fff
  margin-top: -$offset
  width: 90%

.importscollapsed
  width: 0
  height: 0
  transition: $transition-fast

.importsextended
  min-width: 600px

.close-imports
  position: absolute
  z-index: 2
  right: 0
  top: 7px
  height: $icon-width
  width: $icon-height
  display: none

.importsextended .close-imports
  display: block

.label-text
  width: 10rem
  text-align: left
  line-height: 2.25rem
</style>