<template>
  <tr>
    <td>
      <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a>
    </td>
    <td>{{ data.kind.toUpperCase() }}</td>
    <td>{{ formatSurveyDate(data.summary.date) }}</td>
    <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
    <td>{{ data.user }}</td>
    <td>
      <button
        :class="{
          btn: true,
          'btn-sm': true,
          'btn-outline-success': needsApproval(data) || isRejected(data),
          'btn-success': isApproved(data)
        }"
        @click="toggleApproval(data.id, $options.STATES.APPROVED)"
      >
        <font-awesome-icon icon="check"></font-awesome-icon>
      </button>
    </td>
    <td>
      <button
        :class="{
          btn: true,
          'btn-sm': true,
          'btn-outline-danger': needsApproval(data) || isApproved(data),
          'btn-danger': isRejected(data)
        }"
        @click="toggleApproval(data.id, $options.STATES.REJECTED)"
      >
        <font-awesome-icon icon="times"></font-awesome-icon>
      </button>
    </td>
  </tr>
</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 { formatSurveyDate } from "@/lib/date.js";
import { STATES } from "@/store/imports.js";

export default {
  name: "stagingdetail",
  props: ["data"],
  methods: {
    formatSurveyDate(date) {
      return formatSurveyDate(date);
    },
    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)
        .then(() => {
          this.$store.commit("bottlenecks/setSelectedSurveyByDate", date);
        });
    },
    toggleApproval(id, newStatus) {
      this.$store.commit("imports/toggleApproval", {
        id: id,
        newStatus: newStatus
      });
    }
  },
  STATES: STATES
};
</script>

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