<template>
  <div>
      <h4>Staging area</h4>
      <hr>
      <table class="table mb-0">
          <thead>
              <tr>
                  <th>Name</th>
                  <th>Location</th>
                  <th>Datatype</th>
                  <th>Importdate</th>
                  <th>ImportID</th>
                  <th>&nbsp;</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="data in filteredData" :key="data.id">
                  <td>{{ data.name }}</td>
                  <td>
                      <a
                          @click="zoomTo(data.location)"
                          href="#"
                      >{{ data.location[0] }}, {{ data.location[1] }}</a>
                  </td>
                  <td>{{ data.type }}</td>
                  <td>{{ data.date }}</td>
                  <td>{{ data.importID }}</td>
                  <td>
                      <input
                          type="checkbox"
                          aria-label="Checkbox for following text input"
                      >
                  </td>
              </tr>
          </tbody>
      </table>
      <div class="p-3">
          <button class="btn btn-info">Confirm</button>
      </div>
   </div>
</template>

<script>
import { mapState } from "vuex";

const demodata = [
  {
    id: 1,
    name: "B1",
    date: "2018-11-19 10:23",
    location: [16.5364, 48.1471],
    status: "Not approved",
    importID: "123456789",
    type: "bottleneck"
  },
  {
    id: 2,
    name: "B2",
    date: "2018-11-19 10:24",
    location: [16.5364, 48.1472],
    status: "Not approved",
    importID: "123456789",
    type: "bottleneck"
  },
  {
    id: 3,
    name: "s1",
    date: "2018-11-13 10:25",
    location: [16.5364, 48.1473],
    status: "Not approved",
    importID: "987654321",
    type: "soundingresult"
  },
  {
    id: 4,
    name: "s2",
    date: "2018-11-13 10:26",
    location: [16.5364, 48.1474],
    status: "Not approved",
    importID: "987654321",
    type: "soundingresult"
  }
];

export default {
  computed: {
    ...mapState("application", ["searchQuery"]),
    filteredData() {
      return 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: {
    zoomTo(coordinates) {
      this.$store.commit("map/moveMap", {
        coordinates: coordinates,
        zoom: 17,
        preventZoomOut: true
      });
    }
  }
};
</script>

<style lang="sass" scoped>
.table th,
td
  font-size: 0.9rem
  border-top: 0px !important
  text-align: left
  padding: 0.5rem !important
</style>