<template>
  <div class="d-flex flex-column py-1">
    <div class="d-flex flex-row">
      <div @click="showDetails(job.id)" class="jobid mr-2">{{ job.id }}</div>
      <div @click="showDetails(job.id)" class="enqueued mr-2">
        {{ formatDate(job.enqueued) }}
      </div>
      <div @click="showDetails(job.id)" class="kind mr-2">{{ job.kind }}</div>
      <div @click="showDetails(job.id)" class="user mr-2">{{ job.user }}</div>
      <div @click="showDetails(job.id)" class="signer mr-2">
        {{ job.signer }}
      </div>
      <div @click="showDetails(job.id)" class="state mr-2">{{ job.state }}</div>
    </div>
    <div class="d-flex flex-row">
      <div :class="collapse">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th class="first">
                <small><translate>Kind</translate></small>
              </th>
              <th class="second">
                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
                  ><small><translate>Date</translate></small>
                  <small
                    ><font-awesome-icon
                      :icon="sortIcon"
                      class="ml-1"
                    ></font-awesome-icon></small
                ></a>
              </th>
              <th class="third">
                <small><translate>Message</translate></small>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(entry, index) in sortedEntries"
              :key="index"
              class="detailsrow"
            >
              <td class="first">
                <small>{{ entry.kind }}</small>
              </td>
              <td class="second">
                <small>{{ formatDate(entry.time) }}</small>
              </td>
              <td class="third">
                <small>{{ entry.message }}</small>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </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 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */

import { HTTP } from "../../lib/http.js";
import { displayError } from "../../lib/errors.js";
import locale2 from "locale2";

export default {
  name: "importqueuedetail",
  props: ["job"],
  data() {
    return {
      show: false,
      entries: [],
      sortAsc: true
    };
  },
  methods: {
    formatDate(date) {
      return date
        ? new Date(date).toLocaleDateString(locale2, {
            day: "2-digit",
            month: "2-digit",
            year: "numeric"
          })
        : "";
    },
    showDetails(id) {
      if (this.show) {
        this.show = false;
        return;
      }
      HTTP.get("/imports/" + id, {
        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
      })
        .then(response => {
          const { entries } = response.data;
          this.entries = entries;
          this.show = true;
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  computed: {
    sortedEntries() {
      let sorted = this.entries.slice();
      sorted.sort((r1, r2) => {
        let d1 = new Date(r1.time);
        let d2 = new Date(r2.time);
        if (d2 < d1) {
          return !this.sortAsc ? -1 : 1;
        }
        if (d2 > d1) {
          return !this.sortAsc ? 1 : -1;
        }
        return 0;
      });
      return sorted;
    },
    sortIcon() {
      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
    },
    collapse() {
      return {
        animated: true,
        fadeIn: this.show,
        details: true,
        collapse: true,
        show: this.show
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.jobid {
  width: 80px;
}

.enqueued {
  width: 120px;
}

.user {
  width: 80px;
}

.signer {
  width: 80px;
}

.kind {
  width: 80px;
}

.state {
  width: 80px;
}

.details {
  background-color: #fafafa;
  width: 50%;
}

.detailsrow {
  line-height: 0.1em;
}

.first {
  width: 65px;
  padding-left: 0px;
  border-top: 0px;
  padding-bottom: $small-offset;
}

.second {
  width: 100px;
  padding-left: 0px;
  border-top: 0px;
  padding-bottom: $small-offset;
}

.third {
  width: 355px;
  padding-left: 0px;
  border-top: 0px;
  padding-bottom: $small-offset;
}
</style>