<template>
  <div>
    <UIBoxHeader
      icon="clipboard-check"
      title="Staging Area"
      :closeCallback="$parent.close"
    />
    <div class="d-flex flex-row w-100 justify-content-end">
      <button
        class="btn btn-sm btn-outline-info align-self-start mt-3 mr-3"
        @click="refresh"
      >
        <font-awesome-icon icon="redo"></font-awesome-icon>
      </button>
    </div>
    <div class="d-flex flex-row w-100 border-bottom">
      <font-awesome-icon
        class="pointer"
        @click="toggleStaging()"
        v-if="stagingVisible && staging.length > 0"
        icon="angle-up"
        fixed-width
      ></font-awesome-icon>
      <font-awesome-icon
        class="pointer"
        @click="toggleStaging()"
        v-if="!stagingVisible && staging.length > 0"
        icon="angle-down"
        fixed-width
      ></font-awesome-icon>
      <span style="width:1.25em;" v-if="!(staging.length > 0)"></span>
      <Staging v-if="stagingVisible && staging.length > 0"></Staging>
      <div v-else class="d-flex flex-row">
        <h6>
          <small><translate>Review</translate></small>
        </h6>
        <small class="ml-3" v-if="!(staging.length > 0)"
          ><translate>Nothing to review</translate></small
        >
      </div>
    </div>
    <div class="mt-2">
      <div class="d-flex flex-row">
        <font-awesome-icon
          class="pointer"
          @click="toggleLogs()"
          v-if="logsVisible"
          icon="angle-up"
          fixed-width
        ></font-awesome-icon>
        <font-awesome-icon
          class="pointer"
          @click="toggleLogs()"
          v-if="!logsVisible"
          icon="angle-down"
          fixed-width
        ></font-awesome-icon>
        <Logs v-if="logsVisible" :reload="reload"></Logs>
        <div v-else>
          <h6>
            <small><translate>Logs</translate></small>
          </h6>
        </div>
      </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 { displayError } from "@/lib/errors.js";
import { mapState } from "vuex";

export default {
  name: "importoverview",
  data() {
    return {
      reload: false
    };
  },
  components: {
    Staging: () => import("./staging/Staging.vue"),
    Logs: () => import("./importlogs/Logs.vue")
  },
  computed: {
    ...mapState("imports", ["stagingVisible", "logsVisible", "staging"])
  },
  methods: {
    toggleStaging() {
      this.$store.commit("imports/setStagingVisibility", !this.stagingVisible);
    },
    toggleLogs() {
      this.$store.commit("imports/setLogsVisibility", !this.logsVisible);
    },
    refresh() {
      this.reload = true;
      this.loadImportQueue();
      this.loadLogs();
    },
    loadImportQueue() {
      this.$store
        .dispatch("imports/getStaging")
        .then(() => {
          this.reload = false;
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: "Backend Error",
            message: `${status}: ${data.message || data}`
          });
        });
    },
    loadLogs() {
      this.$store
        .dispatch("imports/getImports")
        .then(() => {
          this.reload = false;
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  mounted() {
    this.refresh();
  }
};
</script>

<style></style>