<template>
  <div>
    <button @click="setFilter('pending')" :class="pendingStyle">
      <translate>pending</translate>
    </button>
    <button @click="setFilter('failed')" :class="failedStyle">
      <translate>failed</translate>
    </button>
    <button @click="setFilter('accepted')" :class="acceptedStyle">
      <translate>accepted</translate>
    </button>
    <button @click="setFilter('declined')" :class="declinedStyle">
      <translate>declined</translate>
    </button>
    <button @click="setFilter('warning')" :class="warningStyle">
      <translate>warning</translate>
    </button>
  </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: "importfilters",
  methods: {
    setFilter(name) {
      if (this.loading) return;
      this.$store.commit("imports/toggleFilter", name);
    }
  },
  computed: {
    ...mapState("imports", [
      "pending",
      "failed",
      "accepted",
      "warning",
      "declined"
    ]),
    pendingStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": !this.pending,
        "btn-secondary": this.pending
      };
    },
    failedStyle() {
      return {
        "ml-2": true,
        btn: true,
        "btn-sm": true,
        "btn-light": !this.failed,
        "btn-secondary": this.failed
      };
    },
    declinedStyle() {
      return {
        "ml-2": true,
        btn: true,
        "btn-sm": true,
        "btn-light": !this.declined,
        "btn-secondary": this.declined
      };
    },
    acceptedStyle() {
      return {
        "ml-2": true,
        btn: true,
        "btn-sm": true,
        "btn-light": !this.accepted,
        "btn-secondary": this.accepted
      };
    },
    warningStyle() {
      return {
        "ml-2": true,
        btn: true,
        "btn-sm": true,
        "btn-light": !this.warning,
        "btn-secondary": this.warning
      };
    }
  }
};
</script>

<style lang="scss" scoped></style>