<template>
  <div class="w-90 stagingcard">
    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
      <font-awesome-icon
        class="mr-2"
        icon="clipboard-check"
      ></font-awesome-icon>
      <translate>Staging Area</translate>
    </h6>
    <table class="table">
      <thead>
        <tr>
          <th><translate>Name</translate></th>
          <th><translate>Type</translate></th>
          <th><translate>Date</translate></th>
          <th><translate>Imported</translate></th>
          <th><translate>Username</translate></th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody v-if="filteredData.length">
        <StagingDetail
          :key="data.id"
          v-for="data in filteredData"
          :data="data"
        ></StagingDetail>
      </tbody>
      <tbody v-else>
        <tr>
          <td class="text-center" colspan="6">
            <translate>No results.</translate>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="p-3" v-if="filteredData.length">
      <button @click="confirmReview" class="confirm-button btn btn-info">
        <translate>Confirm</translate>
      </button>
    </div>
    <div class="p-3">
      <button @click="loadData" class="refresh btn btn-dark">Refresh</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 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Markus Kottländer <markus@intevation.de>
 */
import { mapState } from "vuex";
import { HTTP } from "@/lib/http.js";
import { displayError, displayInfo } from "@/lib/errors.js";
import StagingDetail from "./StagingDetail";
import { STATES } from "@/store/imports.js";

export default {
  data() {
    return {};
  },
  components: {
    StagingDetail
  },
  mounted() {
    this.loadData();
  },
  computed: {
    ...mapState("application", ["searchQuery"]),
    ...mapState("imports", ["staging"]),
    filteredData() {
      return this.staging.filter(data => {
        const result = [data.id + "", data.enqueued, data.kind, data.user].some(
          x => x.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
        return result;
      });
    }
  },
  methods: {
    loadData() {
      this.$store.dispatch("imports/getStaging").catch(error => {
        const { status, data } = error.response;
        displayError({
          title: "Backend Error",
          message: `${status}: ${data.message || data}`
        });
      });
    },
    confirmReview() {
      const reviewResults = this.staging
        .filter(x => x.status !== STATES.NEEDSAPPROVAL)
        .map(r => {
          return {
            id: r.id,
            state: r.status
          };
        });
      if (!reviewResults.length) return;
      HTTP.patch("/imports", reviewResults, {
        headers: {
          "X-Gemma-Auth": localStorage.getItem("token"),
          "Content-type": "application/json"
        }
      })
        .then(response => {
          const messages = response.data
            .map(x => {
              if (x.message) return x.message;
              if (x.error) return x.error;
            })
            .join("\n\n");
          displayInfo({
            title: "Staging Area",
            message: messages,
            options: {
              timeout: 0,
              buttons: [{ text: "Ok", action: null, bold: true }]
            }
          });
          this.loadData();
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: "Backend Error",
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  STATES: STATES
};
</script>

<style lang="scss" scoped>
.refresh {
  position: absolute;
  left: $offset;
  bottom: $offset;
}
.table th,
td {
  font-size: 0.9rem;
  border-top: 0px !important;
  border-bottom-width: 1px;
  text-align: left;
  padding: 0.5rem !important;
}

.stagingcard {
  position: relative;
  min-height: 150px;
}

.confirm-button {
  position: absolute;
  right: $offset;
  bottom: $offset;
}
</style>