<template>
  <div class="d-flex flex-column">
    <div class="d-flex flex-row justify-content-between">
      <h5><translate>PDF-Templates</translate></h5>
      <input
        @change="upload"
        id="uploadTemplate"
        ref="uploadTemplate"
        type="file"
        style="visibility:hidden"
      />
    </div>
    <div class="mt-1 border-bottom pb-4">
      <table class="table table-sm table-hover" v-if="templates.length">
        <thead>
          <tr>
            <th><translate>Name</translate></th>
            <th><translate>Date</translate></th>
            <th></th>
          </tr>
        </thead>
        <transition-group name="list-fade" tag="tbody">
          <tr v-for="template in templates" :key="template.name">
            <td>{{ template.name }}</td>
            <td>{{ template.time }}</td>
            <td class="text-right">
              <button
                class="btn btn-sm btn-dark"
                @click="
                  showDeleteTemplatePrompt = true;
                  templateToDelete = template;
                "
              >
                <font-awesome-icon icon="trash" />
              </button>
            </td>
          </tr>
        </transition-group>
      </table>
      <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()">
        <font-awesome-icon
          icon="spinner"
          class="fa-spin fa-fw"
          v-if="uploading"
        />
        <font-awesome-icon icon="upload" class="fa-fw" v-else />
        <translate>Upload new template</translate>
      </button>
    </div>

    <div
      :class="[
        'box popup ui-element rounded bg-white',
        { show: showDeleteTemplatePrompt }
      ]"
    >
      <div>
        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
          <translate>Delete PDF Template</translate>
          <font-awesome-icon
            icon="times"
            class="ml-auto text-muted"
            @click="showDeleteTemplatePrompt = false"
          ></font-awesome-icon>
        </h6>
        <div class="p-3 text-left">
          <translate class="text-center d-block">
            Do you really want to delete the following template:
          </translate>
          <h5 class="mt-3 text-center">{{ templateToDelete.name }}</h5>
        </div>
        <div
          class="py-2 px-3 border-top d-flex align-items-center justify-content-between"
        >
          <button
            class="btn btn-sm btn-warning"
            @click="showDeleteTemplatePrompt = false"
          >
            no
          </button>
          <button class="btn btn-sm btn-info" @click="remove(templateToDelete)">
            yes
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table th,
td {
  font-size: $smaller;
  border-top: 0px !important;
  text-align: left;
  padding: $small-offset !important;
}
</style>

<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 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus@intevation.de>
 */
import { HTTP } from "@/lib/http";
import { displayError } from "@/lib/errors.js";

export default {
  name: "pdftemplates",
  data() {
    return {
      templates: [],
      uploading: false,
      templateToDelete: "",
      showDeleteTemplatePrompt: false
    };
  },
  methods: {
    upload() {
      const reader = new FileReader();
      reader.onload = event => {
        let template;
        try {
          template = JSON.parse(event.target.result);
        } catch (e) {
          displayError({
            title: this.$gettext("Format Error"),
            message: this.$gettext(
              "Uploaded file does not contain valid json data."
            )
          });
        }
        if (template.name) {
          this.uploading = true;
          HTTP.post(
            "/templates/print/" + template.name,
            {
              template_name: template.name,
              template_data: template
            },
            {
              headers: {
                "X-Gemma-Auth": localStorage.getItem("token"),
                "Content-type": "text/xml; charset=UTF-8"
              }
            }
          )
            .then(() => {
              this.loadTemplates();
            })
            .catch(e => {
              const { status, data } = e.response;
              displayError({
                title: this.$gettext("Backend Error"),
                message: `${status}: ${data.message || data}`
              });
            })
            .finally(() => {
              this.uploading = false;
            });
        } else {
          displayError({
            title: this.$gettext("Format Error"),
            message: this.$gettext(
              "The provided template has no name property."
            )
          });
        }
      };
      reader.onerror = error => console.log(error);
      reader.readAsText(this.$refs.uploadTemplate.files[0]);
    },
    loadTemplates() {
      HTTP.get("/templates/print", {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      })
        .then(response => {
          this.templates = response.data;
        })
        .catch(e => {
          const { status, data } = e.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    remove(template) {
      this.showDeleteTemplatePrompt = false;
      HTTP.delete("/templates/print/" + template.name, {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "text/xml; charset=UTF-8"
        }
      }).then(() => {
        let removeIndex = this.templates.findIndex(
          t => t.name === template.name
        );
        if (removeIndex !== -1) {
          this.templates.splice(removeIndex, 1);
        }
      });
    }
  },
  mounted() {
    this.loadTemplates();
  }
};
</script>