<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>Staging Area
        </h6>
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Datatype</th>
                    <th>Importdate</th>
                    <th>ImportID</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.location)" href="#">{{ data.name }}</a>
                    </td>
                    <td>{{ data.type }}</td>
                    <td>{{ data.date }}</td>
                    <td>{{ data.importID }}</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">No results.</td>
                </tr>
            </tbody>
        </table>
        <div class="p-3" v-if="filteredData.length">
            <button @click="confirmReview" class="btn btn-info">Confirm</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>
 */
import { mapState } from "vuex";

import { displayError, displayInfo } from "../../../lib/errors.js";

export default {
  STATES: {
    NEEDSAPPROVAL: "NEEDSAPPROVAL",
    APPROVED: "APPROVED",
    REJECTED: "REJECTED"
  },
  data() {
    return {
      demodata: [
        {
          id: 1,
          name: "B1",
          date: "2018-11-19 10:23",
          location: [16.5364, 48.1471],
          status: "NEEDSAPPROVAL",
          importID: "123456789",
          type: "bottleneck"
        },
        {
          id: 2,
          name: "B2",
          date: "2018-11-19 10:24",
          location: [16.5364, 48.1472],
          status: "NEEDSAPPROVAL",
          importID: "123456789",
          type: "bottleneck"
        },
        {
          id: 3,
          name: "s1",
          date: "2018-11-13 10:25",
          location: [16.5364, 48.1473],
          status: "NEEDSAPPROVAL",
          importID: "987654321",
          type: "soundingresult"
        },
        {
          id: 4,
          name: "s2",
          date: "2018-11-13 10:26",
          location: [16.5364, 48.1474],
          status: "NEEDSAPPROVAL",
          importID: "987654321",
          type: "soundingresult"
        }
      ]
    };
  },
  mounted() {
    this.$store.dispatch("imports/getStaging").catch(error => {
      const { status, data } = error.response;
      displayError({
        title: "Backend Error",
        message: `${status}: ${data.message || data}`
      });
    });
  },
  computed: {
    ...mapState("application", ["searchQuery"]),
    filteredData() {
      return this.demodata.filter(data => {
        const nameFound = data.name
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());
        const dateFound = data.date
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());
        const locationFound = data.location.find(coord => {
          return coord
            .toString()
            .toLowerCase()
            .includes(this.searchQuery.toLowerCase());
        });
        const statusFound = data.status
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());
        const importIDFound = data.importID
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());
        const typeFound = data.type
          .toLowerCase()
          .includes(this.searchQuery.toLowerCase());

        return (
          nameFound ||
          dateFound ||
          locationFound ||
          statusFound ||
          importIDFound ||
          typeFound
        );
      });
    }
  },
  methods: {
    confirmReview() {
      const message = this.demodata
        .map(x => {
          return x.name + ": " + x.status;
        })
        .join("\n");
      displayInfo({
        title: "Staging Area",
        message: message
      });
    },
    needsApproval(item) {
      return item.status === this.$options.STATES.NEEDSAPPROVAL;
    },
    isRejected(item) {
      return item.status === this.$options.STATES.REJECTED;
    },
    isApproved(item) {
      return item.status === this.$options.STATES.APPROVED;
    },
    zoomTo(coordinates) {
      this.$store.commit("map/moveMap", {
        coordinates: coordinates,
        zoom: 17,
        preventZoomOut: true
      });
    },
    toggleApproval(id, newStatus) {
      const stagedResult = this.demodata.find(e => {
        return e.id === id;
      });
      if (stagedResult.status === newStatus) {
        stagedResult.status = this.$options.STATES.NEEDSAPPROVAL;
      } else {
        stagedResult.status = 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>