<template>
  <div class="w-100">
    <div class="d-flex justify-content-between flex-row w-100 border-bottom">
      <h6><translate>Review</translate></h6>
      <button class="btn btn-sm btn-info align-self-end" @click="save">
        <translate>Confirm</translate>
      </button>
    </div>
    <StagingDetail
      class="mb-3 border-bottom"
      :key="data.id"
      v-for="data in filteredData"
      :data="data"
    ></StagingDetail>
  </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, mapGetters } from "vuex";
import { displayError, displayInfo } from "@/lib/errors.js";

export default {
  name: "stagingsection",
  computed: {
    ...mapState("imports", ["staging"]),
    ...mapGetters("imports", ["processedReviews"]),
    filteredData() {
      return this.staging;
    }
  },
  methods: {
    loadImportQueue() {
      this.$store.dispatch("imports/getStaging").catch(error => {
        const { status, data } = error.response;
        displayError({
          title: "Backend Error",
          message: `${status}: ${data.message || data}`
        });
      });
    },
    save() {
      if (!this.processedReviews.length) return;
      this.$store
        .dispatch("imports/confirmReview", this.processedReviews)
        .then(response => {
          this.loadImportQueue();
          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 }]
            }
          });
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: "Backend Error",
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  components: {
    StagingDetail: () => import("./StagingDetail.vue")
  }
};
</script>

<style></style>