<template>
  <div class="w-90">
    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
      <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon>
      <translate>Staging Area</translate>
    </h6>
    <table class="table mb-0">
      <thead>
        <tr>
          <th>
            <translate>Name</translate>
          </th>
          <th>
            <translate>Type</translate>
          </th>
          <th>
            <translate>Date</translate>
          </th>
          <th>
            <translate>Imported</translate>
          </th>
          <th>
            <translate>Username</translate>
          </th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody v-if="filteredData.length">
        <tr v-for="data in filteredData" :key="data.id">
          <td>
            <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a>
          </td>
          <td>{{ data.kind.toUpperCase() }}</td>
          <td>{{ data.summary.date }}</td>
          <td>{{ data.enqueued.split("T")[0] }}</td>
          <td>{{ data.user }}</td>
          <td>
            <button
              @click="toggleApproval(data.id, $options.STATES.APPROVED)"
              :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}"
            >
              <font-awesome-icon icon="check"></font-awesome-icon>
            </button>
          </td>
          <td>
            <button
              @click="toggleApproval(data.id, $options.STATES.REJECTED)"
              :class="{btn:true,  'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}"
            >
              <font-awesome-icon icon="times"></font-awesome-icon>
            </button>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td class="text-center" colspan="6">
            <translate>No results.</translate>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="p-3" v-if="filteredData.length">
      <button @click="confirmReview" class="btn btn-info">
        <translate>Confirm</translate>
      </button>
    </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>
 * Markus Kottländer <markus@intevation.de>
 */
import { mapState } from "vuex";
import { STATES } from "../../../store/imports.js";
import { displayError, displayInfo } from "../../../lib/errors.js";

export default {
  data() {
    return {};
  },
  mounted() {
    this.$store.dispatch("imports/getStaging").catch(error => {
      const { status, data } = error.response;
      displayError({
        title: this.$gettext("Backend Error"),
        message: `${status}: ${data.message || data}`
      });
    });
  },
  computed: {
    ...mapState("application", ["searchQuery"]),
    ...mapState("imports", ["staging"]),
    filteredData() {
      return this.staging.filter(data => {
        const result = [data.id + "", data.enqueued, data.kind, data.user].some(
          x => x.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
        return result;
      });
    }
  },
  STATES: STATES,
  methods: {
    confirmReview() {
      const message = this.staging
        .map(x => {
          return x.id + ": " + x.status;
        })
        .join("\n");
      displayInfo({
        title: this.$gettext("Staging Area"),
        message: message
      });
    },
    needsApproval(item) {
      return item.status === STATES.NEEDSAPPROVAL;
    },
    isRejected(item) {
      return item.status === STATES.REJECTED;
    },
    isApproved(item) {
      return item.status === STATES.APPROVED;
    },
    zoomTo(id) {
      if (!id) return;
      const soundingResult = this.filteredData.filter(x => x.id == id)[0];
      const { lat, lon, bottleneck, date } = soundingResult.summary;
      const coordinates = [lat, lon];

      this.$store.commit("map/moveMap", {
        coordinates: coordinates,
        zoom: 17,
        preventZoomOut: true
      });
      this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck);
      this.$store.commit("bottlenecks/selectedSurvey", date);
    },
    toggleApproval(id, newStatus) {
      this.$store.commit("imports/toggleApproval", {
        id: id,
        newStatus: newStatus
      });
    }
  }
};
</script>

<style lang="sass" scoped>

.table th,
td
  font-size: 0.9rem
  border-top: 0px !important
  border-bottom-width: 1px
  text-align: left
  padding: 0.5rem !important
</style>