<template>
  <div>
    <h1 class="dt-header">{{header}}</h1>
    <div class="search-wrapper">
        <label>Search:</label>
        <input type="text" v-model="search" placeholder="Search"/>
    </div>
    <table class="pure-table pure-table-bordered pure-table-striped">
        <thead>
            <th v-for="col in columns" :key="col.Name" @click="sort(col.Name)">
                <span>{{col.Name}}</span>
                <i class="fa fa-sort"></i>
            </th>
        </thead>
        <tbody>
            <tr v-for="row in sortedRows" :key="row.Id">
              <td v-for="(value, key, index) in row" :key="index">
                  <span>{{value}}</span>
                  <button v-if="index == 0" class="" @click="deleteItem(row.Id)">
                      <i class="fa fa-trash"></i>
                  </button>
              </td>
            </tr>
            <td v-for="col in columns" :key="col.Name">
              <input class="input" v-if="col.InputType == 'auto'" disabled value="auto">
              <input class="input" v-if="col.InputType == 'text'" v-model="newrow[col.NewRowField]">
              <input class="input" v-if="col.InputType == 'dropdown'" is="dropdown" :newrow="newrow" :field="col.NewRowField" :data="col.Dropdown.Values" :displayFunc="col.Dropdown.RenderFunc">
              <input class="input" v-if="col.InputType == 'number'" v-model.number="newrow[col.NewRowField]" type="number">
            </td>
        </tbody>
    </table>

    <button class="pure-button pure-button-primary" v-on:click="refresh">
        <i class="fa fa-sync"></i>
        Update
    </button>
    <button class="pure-button pure-button-primary" v-on:click="addItem(newrow)">
        <i class="fa fa-plus"></i>
        Add Row
    </button>
  </div>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue'

export default {
  name: 'DataTable',
  components: {
    Dropdown
  },
  props: ['header', 'columns', 'rows', 'newrow'],
  data () {
    return {
      search: '',
      currentSort: '',
      currentSortDir: 'asc'
    }
  },
  methods: {
    refresh: function () {
      this.$emit('refresh')
    },
    addItem: function (newrow) {
      this.$emit('addItem', newrow)
    },
    deleteItem: function (id) {
      this.$emit('deleteItem', id)
    },
    sort: function (colName) {
      this.currentSortDir = colName === this.currentSort ? (this.currentSortDir === 'asc'? 'desc' : 'asc') : 'asc'
      this.currentSort = colName
    }
  },
  computed: {
    filteredRows: function () {
      return this.rows.filter(row => {
        return _.find(row, r => {
          return `${r}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0
        })
      });
    },
    sortedRows: function () {
      return this.currentSort === '' ? this.filteredRows : _.orderBy(this.filteredRows, this.currentSort, this.currentSortDir)
    }
  },
}
</script>

<style scoped>
.input {
  width: 100%;
}
.dt-header {
    margin-bottom: 30px;
}
.search-wrapper {
    margin-bottom: 20px;
}

</style>
