<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>
export default {
  name: "importfilters",
  data() {
    return {
      failed: false,
      pending: false,
      accepted: false,
      declined: false,
      warning: 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.$store.commit("imports/clearFilers");
      }
      const filters = [
        "failed",
        "pending",
        "accepted",
        "declined",
        "warning"
      ].filter(x => this[x]);
      this.$store.commit("imports/setFilters", filters);
    }
  },
  computed: {
    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>