<template>
  <div class="row w-100 no-gutters text-left">
    <div style="width: 79px;" class="table-cell d-flex justify-content-between">
      <UISpinnerButton
        @click="toggleDetails"
        :loading="loading"
        :state="entry.id === show"
        :icons="['angle-right', 'angle-down']"
      />
      {{ entry.id }}
    </div>
    <div style="width: 53px;" class="table-cell center">
      {{ entry.kind.toUpperCase() }}
    </div>
    <div style="width: 138px;" class="table-cell center">
      {{ entry.enqueued | dateTime }}
    </div>
    <div style="width: 105px;" class="table-cell truncate">
      {{ entry.user }}
    </div>
    <div style="width: 105px;" class="table-cell truncate">
      {{ entry.signer }}
    </div>
    <div style="width: 72px;" class="table-cell center">
      <span v-if="entry.state === 'failed'" class="text-danger">
        {{ entry.state }}
      </span>
      <span v-else>{{ entry.state }}</span>
    </div>
    <div style="width: 44px;" class="table-cell center">
      <font-awesome-icon
        v-if="entry.warnings"
        class="text-warning"
        icon="exclamation-triangle"
        fixed-width
      ></font-awesome-icon>
    </div>
    <div style="flex-grow: 1; padding: 0;" class="table-cell text-right">
      <button
        :class="['action approved', { active: isApproved }]"
        @click="toggleApproval($options.STATES.APPROVED)"
        v-if="entry.state === 'pending'"
      >
        <font-awesome-icon
          class="small pointer"
          icon="check"
        ></font-awesome-icon>
      </button>
      <button
        :class="['action rejected', { active: isRejected }]"
        @click="toggleApproval($options.STATES.REJECTED)"
        v-if="entry.state === 'pending'"
      >
        <font-awesome-icon
          icon="times"
          class="small pointer"
        ></font-awesome-icon>
      </button>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.action
  height: 100%
  width: 50%
  border: 0
  background: white
  outline: none
  &.approved
    color: green
    &.active,
    &:hover
      color: white
      background: green
  &.rejected
    border-left: 1px solid #dee2e6
    color: red
    &.active,
    &:hover
      color: white
      background: red
.active
  .action
    background-color: #d2eaee
    &.rejected
      border-left: solid 1px rgba(255, 255, 255, 0.3)
</style>

<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 { STATES } from "@/store/imports.js";
import { displayError } from "@/lib/errors.js";
import { HTTP } from "@/lib/http.js";

export default {
  STATES,
  props: ["entry"],
  data() {
    return {
      loading: false
    };
  },
  computed: {
    ...mapState("imports", ["show"]),
    needsApproval() {
      return this.entry.status === STATES.NEEDSAPPROVAL;
    },
    isRejected() {
      return this.entry.status === STATES.REJECTED;
    },
    isApproved() {
      return this.entry.status === STATES.APPROVED;
    }
  },
  methods: {
    toggleApproval(state) {
      this.$store.commit("imports/toggleApprove", {
        id: this.entry.id,
        newStatus: state
      });
    },
    toggleDetails() {
      const { id } = this.entry;
      if (id === this.show) {
        this.$store.commit("imports/hideDetails");
        this.$store.commit("imports/hideAdditionalInfo");
        this.$store.commit("imports/hideAdditionalLogs");
      } else {
        this.loading = true;
        HTTP.get("/imports/" + this.entry.id, {
          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
        })
          .then(response => {
            this.$store.commit("imports/showDetailsFor", id);
            this.$store.commit("imports/setCurrentDetails", response.data);
          })
          .catch(error => {
            const { status, data } = error.response;
            displayError({
              title: this.$gettext("Backend Error"),
              message: `${status}: ${data.message || data}`
            });
          })
          .finally(() => (this.loading = false));
      }
    }
  }
};
</script>