<template>
  <div class="d-flex flex-column">
    <div class="ml-2 mr-2 my-3">
      <div class="custom-file mt-3">
        <input
          accept=".zip,.txt"
          type="file"
          @change="fileSelected"
          class="custom-file-input"
          id="uploadFile"
        />
        <label class="pointer custom-file-label" for="uploadFile">
          {{ uploadLabel }}
        </label>
      </div>
    </div>
    <div class="d-flex justify-content-between mt-2 p-2 border-top">
      <button @click="$parent.showForm = false" class="btn btn-sm btn-warning">
        <translate>Back</translate>
      </button>
      <button
        @click="save"
        type="submit"
        class="shadow-sm btn btn-sm btn-info submit-button"
        :disabled="!uploadFile"
      >
        <translate>Submit</translate>
      </button>
    </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 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>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */
import { displayError, displayInfo } from "@/lib/errors";
import { HTTP } from "@/lib/http";

export default {
  props: ["editStretch"],
  data() {
    return {
      uploadLabel: this.$gettext(this.$options.UPLOADLABEL),
      uploadFile: null
    };
  },
  computed: {},
  methods: {
    initialState() {
      this.uploadFile = null;
      this.uploadLabel = this.$options.UPLOADLABEL;
      this.$parent.showForm = false;
    },
    fileSelected(e) {
      const files = e.target.files || e.dataTransfer.files;
      if (!files) return;
      this.uploadLabel = files[0].name;
      this.uploadFile = files[0];
    },
    save() {
      let formData = new FormData();
      formData.append("stsh", this.uploadFile);
      HTTP.post(`/imports/stsh`, formData, {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token")
        }
      })
        .then(() => {
          displayInfo({
            title: this.$gettext("Import"),
            message: this.$gettext("Upload of stretch complete")
          });
          this.initialState();
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  mounted() {},
  UPLOADLABEL: "choose a .zip shapefile"
};
</script>