<template>
  <div class="w-90 stagingcard">
    <UIBoxHeader
      icon="clipboard-check"
      title="Staging Area"
      :closeCallback="$parent.close"
    />
    <div class="mt-3 pl-3 pr-3">
      <div class="mt-3 text-left flex-row d-flex border-bottom">
        <div class="header text-left name"><translate>Name</translate></div>
        <div class="header text-left type"><translate>Type</translate></div>
        <div class="header text-left date"><translate>Date</translate></div>
        <div class="header text-left imported">
          <translate>Imported</translate>
        </div>
        <div class="header text-left username">
          <translate>Username</translate>
        </div>
        <div class="ml-3 controls"></div>
      </div>
      <div class="mt-3 stagingdetails details" v-if="filteredData.length > 0">
        <StagingDetail
          class="mb-3 border-bottom"
          :key="data.id"
          v-for="data in filteredData"
          :data="data"
        ></StagingDetail>
      </div>
    </div>
    <div class="mt-3 p-3" v-if="filteredData.length > 0">
      <button @click="confirmReview" class="confirm-button btn btn-info">
        <translate>Confirm</translate>
      </button>
    </div>
    <div v-else class="mr-auto ml-auto"><translate>No results.</translate></div>
    <div class="mt-1 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 { STATES } from "@/store/imports.js";

export default {
  data() {
    return {};
  },
  components: {
    StagingDetail: () => import("./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>
.stagingdetails {
  overflow-y: auto;
  max-height: 250px;
}
.name {
  width: 180px;
}

.date {
  width: 90px;
}

.type {
  width: 40px;
}

.imported {
  width: 90px;
}

.username {
  width: 150px;
}

.controls {
  width: 60px;
}

.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>