<template>
  <div class="w-95">
    <div class="text-left">
      <h6><translate>Logs</translate></h6>
    </div>
    <div class="d-flex justify-content-between flex-row">
      <button @click="setFilter('failed')" :class="failedStyle">
        <translate>Failed</translate>
      </button>
      <button @click="setFilter('pending')" :class="pendingStyle">
        <translate>Pending</translate>
      </button>
      <button @click="setFilter('declined')" :class="rejectedStyle">
        <translate>Rejected</translate>
      </button>
      <button @click="setFilter('accepted')" :class="acceptedStyle">
        <translate>Accepted</translate>
      </button>
      <button @click="setFilter('warning')" :class="warningStyle">
        <translate>Warning</translate>
      </button>
    </div>
    <div class="mt-3 logdetails">
      <div v-for="job in imports" :key="job.id" class="d-flex flex-row">
        <LogDetail :job="job"></LogDetail>
      </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 { mapState } from "vuex";
import { displayError } from "@/lib/errors.js";

export default {
  name: "logsection",
  components: {
    LogDetail: () => import("./LogDetail.vue")
  },
  props: ["reload"],
  data() {
    return {
      loading: false,
      failed: false,
      pending: false,
      declined: false,
      accepted: false,
      warning: false
    };
  },
  computed: {
    ...mapState("imports", ["imports"]),
    pendingStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-outline-info": !this.pending,
        "btn-info": this.pending
      };
    },
    failedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-outline-info": !this.failed,
        "btn-info": this.failed
      };
    },
    rejectedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-outline-info": !this.declined,
        "btn-info": this.declined
      };
    },
    acceptedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-outline-info": !this.accepted,
        "btn-info": this.accepted
      };
    },
    warningStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-outline-info": !this.warning,
        "btn-info": this.warning
      };
    }
  },
  watch: {
    reload() {
      if (!this.reload) return;
      this.warning = false;
      this.successful = false;
      this.failed = false;
      this.pending = false;
      this.accepted = false;
      this.declined = false;
    }
  },
  methods: {
    setFilter(name) {
      if (this.loading) return;
      this[name] = !this[name];
      const allSet =
        this.failed &&
        this.pending &&
        this.accepted &&
        this.declined &&
        this.warning;
      if (allSet) {
        this.warning = false;
        this.successful = false;
        this.failed = false;
        this.pending = false;
        this.accepted = false;
        this.declined = false;
      }
      this.loadFiltered();
    },
    loadFiltered() {
      this.loading = true;
      const filter = [
        "failed",
        "pending",
        "accepted",
        "declined",
        "warning"
      ].filter(x => this[x]);
      this.$store
        .dispatch("imports/getImports", filter)
        .then(() => {
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.logdetails {
  overflow-y: auto;
  max-height: 650px;
}
</style>