<template>
  <div>
    <div class="d-flex flex-row">
      <font-awesome-icon
        v-if="entry.id === show"
        @click="toggleDetails"
        class="my-auto mr-1 text-info pointer"
        icon="angle-down"
        fixed-width
      ></font-awesome-icon>
      <font-awesome-icon
        v-if="entry.id !== show"
        @click="toggleDetails"
        class="my-auto mr-1 text-info pointer"
        icon="angle-right"
        fixed-width
      ></font-awesome-icon>
      <div class="enqueued">{{ entry.enqueued | surveyDate }}</div>
      <div class="user">{{ entry.user }}</div>
      <div class="signer">{{ entry.signer }}</div>
      <div>
        <font-awesome-icon
          v-if="entry.warnings"
          class="ml-1 text-warning"
          icon="exclamation-triangle"
          fixed-width
        ></font-awesome-icon>
      </div>
      <div v-if="reviewable" class="controls d-flex flex-row ml-auto">
        <div>
          <button
            :class="{
              'ml-3': true,
              'mr-3': true,
              btn: true,
              'btn-outline-success': needsApproval || isRejected,
              'btn-success': isApproved,
              actions: true
            }"
            @click="toggleApproval($options.STATES.APPROVED)"
          >
            <font-awesome-icon
              class="mx-auto small pointer mb-2"
              icon="check"
            ></font-awesome-icon>
          </button>
        </div>
        <div>
          <button
            :class="{
              'mr-3': true,
              btn: true,
              'btn-outline-danger': needsApproval || isApproved,
              'btn-danger': isRejected,
              actions: true
            }"
            @click="toggleApproval($options.STATES.REJECTED)"
          >
            <font-awesome-icon
              icon="times"
              class="small pointer mb-2"
            ></font-awesome-icon>
          </button>
        </div>
      </div>
    </div>
    <div class="d-flex flex-row">
      <LogDetail entry="entry" v-if="show === entry.id"></LogDetail>
    </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 { STATES } from "@/store/imports.js";

export default {
  name: "importlogentry",
  props: ["entry"],
  components: {
    LogDetail: () => import("./LogDetail.vue")
  },
  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");
      } else {
        this.$store.commit("imports/showDetailsFor", id);
      }
    }
  },
  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;
    },
    reviewable() {
      return this.entry.state === "pending";
    }
  },
  STATES: STATES
};
</script>

<style lang="scss" scoped>
.enqueued {
  width: 20%;
}
.user {
  width: 10%;
}
.signer {
  width: 10%;
}
button {
  height: 19px;
  width: 19px;
  padding: 0.1rem;
}
</style>