<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('rejected')" :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";

export default {
  name: "logsection",
  components: {
    LogDetail: () => import("./LogDetail.vue")
  },
  data() {
    return {
      failed: false,
      pending: false,
      rejected: false,
      accepted: false,
      warning: false
    };
  },
  computed: {
    ...mapState("imports", ["imports"]),
    pendingStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.pending,
        "btn-info": this.pending
      };
    },
    failedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.failed,
        "btn-info": this.failed
      };
    },
    rejectedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.rejected,
        "btn-info": this.rejected
      };
    },
    acceptedStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.accepted,
        "btn-info": this.accepted
      };
    },
    warningStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.warning,
        "btn-info": this.warning
      };
    }
  },
  methods: {
    setFilter(name) {
      this[name] = !this[name];
      const allSet =
        this.failed &&
        this.pending &&
        this.accepted &&
        this.rejected &&
        this.warning;
      if (allSet) {
        this.warning = false;
        this.successful = false;
        this.failed = false;
        this.pending = false;
        this.accepted = false;
        this.rejected = false;
      }
    }
  }
};
</script>

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