<template>
  <div class="pb-2 d-flex flex-column w-100">
    <div class="d-flex flex-row">
      <div class="mt-auto d-flex flex-row mb-auto small name text-left">
        <a
          v-if="!isBottleneck(data.kind.toUpperCase())"
          @click="zoomTo()"
          href="#"
          >{{ data.summary.bottleneck }}</a
        >
        <span v-else class="mr-auto ml-auto">*</span>
      </div>
      <div class="mt-auto mb-auto small text-left type">
        {{ data.kind.toUpperCase() }}
      </div>
      <div class="mt-auto mb-auto small text-left date">
        {{ formatSurveyDate(data.summary.date) }}
      </div>
      <div class="mt-auto mb-auto small text-left imported">
        {{ formatSurveyDate(data.enqueued.split("T")[0]) }}
      </div>
      <div class="mt-auto mb-auto small text-left username">
        {{ data.user }}
      </div>
      <div class="controls d-flex flex-row justify-content-end">
        <div>
          <button
            :class="{
              'ml-3': true,
              'mr-3': true,
              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>
        </div>
        <div>
          <button
            :class="{
              'mr-3': true,
              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>
        </div>
        <div v-if="isBottleneck(data.kind.toUpperCase())">
          <div
            @click="showDetails()"
            class="mt-auto mb-auto text-info text-left"
          >
            <font-awesome-icon
              v-if="show"
              icon="angle-up"
              fixed-width
            ></font-awesome-icon>
            <font-awesome-icon
              v-if="loading"
              icon="spinner"
              fixed-width
            ></font-awesome-icon>
            <font-awesome-icon
              v-if="!show && !loading"
              icon="angle-down"
              fixed-width
            ></font-awesome-icon>
          </div>
        </div>
        <div v-else class="empty"></div>
      </div>
    </div>
    <div class="d-flex flex-row" v-if="show">
      <a
        class="small"
        v-for="(bottleneck, index) in data.summary.bottlenecks"
        :key="index"
        href="#"
        >{{ bottleneck }}</a
      >
    </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 { formatSurveyDate } from "@/lib/date.js";
import { STATES } from "@/store/imports.js";

export default {
  name: "stagingdetail",
  props: ["data"],
  data() {
    return {
      show: false,
      loading: false
    };
  },
  methods: {
    showDetails() {
      if (this.show) {
        this.show = false;
        return;
      }
      this.show = true;
    },
    isBottleneck(kind) {
      return kind === "BN";
    },
    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() {
      const { lat, lon, bottleneck, date } = this.data.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>
.empty {
  margin-right: 20px;
}

.name {
  width: 120px;
}

.date {
  width: 90px;
}

.type {
  width: 40px;
}

.imported {
  width: 90px;
}

.username {
  width: 150px;
}

.controls {
  width: 60px;
}
</style>