<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-dark align-self-start" @click="refresh">
        <translate>Refresh</translate>
      </button>
    </div>
    <div class="d-flex flex-row w-100 border-bottom">
      <font-awesome-icon
        class="pointer"
        @click="toggleStaging()"
        v-if="stagingVisible"
        icon="angle-up"
        fixed-width
      ></font-awesome-icon>
      <font-awesome-icon
        class="pointer"
        @click="toggleStaging()"
        v-if="!stagingVisible"
        icon="angle-down"
        fixed-width
      ></font-awesome-icon>
      <Staging v-if="stagingVisible"></Staging>
      <div v-else><h5>Staging</h5></div>
    </div>
    <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"></Logs>
      <div v-else><h5>Logs</h5></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",
  components: {
    Staging: () => import("./staging/Staging.vue"),
    Logs: () => import("./importlogs/Logs.vue")
  },
  computed: {
    ...mapState("imports", ["stagingVisible", "logsVisible"])
  },
  methods: {
    toggleStaging() {
      this.$store.commit("imports/setStagingVisibility", !this.stagingVisible);
    },
    toggleLogs() {
      this.$store.commit("imports/setLogsVisibility", !this.logsVisible);
    },
    refresh() {
      this.loadImportQueue();
      this.loadLogs();
    },
    loadImportQueue() {
      this.$store
        .dispatch("imports/getImports")
        .then(() => {})
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    loadLogs() {
      this.$store.dispatch("imports/getStaging").catch(error => {
        const { status, data } = error.response;
        displayError({
          title: "Backend Error",
          message: `${status}: ${data.message || data}`
        });
      });
    }
  },
  mounted() {
    this.refresh();
  }
};
</script>

<style></style>