<template lang="pug">
//- Search
.data-sheet-wrapper
  //- Title/Search
  .columns.data-sheet-nav(v-if="showNavigation")
    //- Pre Title Toolbar Slot
    slot(name="toolbar-pre-title")
    //- Title Slot
    slot.column(
      name="title"
    )
      .column.is-narrow.is-size-4.has-text-weight-bold.data-sheet-title(v-if="title")
        span {{ title }}
    //- Post Title Toolbar Slot
    slot(name="toolbar-post-title")
    //- Search
    .column.data-sheet-nav-control-center
      data-sheet-search(
        :updateMatchText="searchExternal ? updateExternalMatchText : match.updateMatchText"
        :matchText="match.text"
        :searchPlaceholder="searchPlaceholder"
        :isDisabled="displayModelSlice.length === 0"
      )
    //- Post Search Toolbar Slot
    slot(name="toolbar-post-search")
    //- Pagination
    .column.is-narrow.data-sheet-nav-control-center
      data-sheet-pagination-control(
        :displayModel="displayModel"
        :download="download"
        :paginate="paginate"
      )
    //- Post Pagination Toolbar Slot
    slot(name="toolbar-post-pagination")
  //- Filter List
  data-sheet-filters(
    :filters="filters"
  )
  //- Scrollable Wrapper
  .data-sheet-table-wrapper
    //- Table
    table.table.data-sheet-table(:class="modifiers")
      //- Pre Header Slot
      slot(
        name="pre-header-row"
        :columns="displayColumns"
        :columnar="columnar"
      )
      //- Column Headers
      thead
        data-sheet-column-title(
          :columns="displayColumns"
          :columnar="columnar"
          :select="select"
          :showCheckbox="showCheckbox"
        )
          //- Example of overriding a Nested Slot
          //- template(
          //-   slot="priceSale-title-text"
          //-   slot-scope="{ column }"
          //- )
          //-   a.has-text-danger(@click.prevent.stop="columnar.toggleSortDirection(column)") {{ column.heading || column.title || '' }} ($)
      //- Post Header Slot
      slot(
        name="post-header-row"
        :columns="displayColumns"
        :columnar="columnar"
      )
      //- Body Rows
      data-sheet-body(
        :model="displayModelSlice"
        :columns="displayColumns"
        :columnar="columnar"
        :select="select"
        :unselectableRows="unselectableRows"
        :selectedRows="selectedRows"
        :keyIteratee="keyIteratee"
        :showCheckbox="showCheckbox"
        v-if="!isLoading"
      )
        //- Default Slot Override with Filtering & Iteratee
        template(
          v-for="column in displayColumns"
          :slot="`${column.key}-cell`"
          slot-scope="{ row, value }"
        )
          slot(
            :name="`${column.key}-cell`"
            :row="row"
            :value="column.value"
          )
        //- Examples of Cell Slots, Filtering
        //- template(
        //-   slot="name-cell"
        //-   slot-scope="{ row, value }"
        //- )
        //-   a(
        //-     @click.prevent.stop="filters.add({name: `Name = '${row.name}'`, predicate: predicateRow => predicateRow.name === row.name})"
        //-   ) {{ (value.iteratee && value.iteratee(row)) || row[value.property] }}
        //- template(
        //-   slot="priceSale-cell"
        //-   slot-scope="{ row, value }"
        //- )
        //-   a(@click.prevent.stop="filters.add({name: `PriceSale = $${row.priceSale}`, predicate: predicateRow => predicateRow.priceSale === row.priceSale})") ${{ (value.iteratee && value.iteratee(row)) || row[value.property] }}
    .hero.is-small.data-sheet-loading(v-if="isLoading")
      .hero-body.has-text-centered
        slot.column(
          name="loading"
        )
          span.icon.is-large.is-size-4
            i.fa.fa-spinner-third.fa-spin
    .hero.is-small.data-sheet-no-content(v-if="!isLoading && displayModelSlice.length === 0")
      .hero-body.has-text-centered
        slot.column(
          name="noData"
        )
          h3.is-size-5.has-text-grey No Data
  //- Foot Controls
  .data-sheet-footer(v-if="footerControls")
    data-sheet-pagination-control(
      :displayModel="displayModel"
      :download="download"
      :paginate="paginate"
    )
  </div>
</template>

<script>
import { debounce } from 'lodash'
import DataSheetBody from 'site-components/dataSheet/DataSheetBody'
import DataSheetColumnTitle from 'site-components/dataSheet/DataSheetColumnTitle'
import DataSheetFilters from 'site-components/dataSheet/DataSheetFilters'
import DataSheetPaginationControl from 'site-components/dataSheet/DataSheetPaginationControl'
import DataSheetSearch from 'site-components/dataSheet/DataSheetSearch'

export default {
  name: 'DataSheetTable',
  components: {
    'data-sheet-body': DataSheetBody,
    'data-sheet-column-title': DataSheetColumnTitle,
    'data-sheet-filters': DataSheetFilters,
    'data-sheet-pagination-control': DataSheetPaginationControl,
    'data-sheet-search': DataSheetSearch
  },
  props: {
    title: {
      type: String,
      required: false
    },
    keyIteratee: {
      type: Function,
      required: true
    },
    displayModel: {
      type: Array,
      required: true
    },
    displayModelSlice: {
      type: Array,
      required: true
    },
    displayColumns: {
      type: Array,
      required: true
    },
    showNavigation: {
      type: Boolean,
      required: false,
      default: true
    },
    columnar: {
      type: Object,
      required: true
    },
    filters: {
      type: Object,
      required: true
    },
    select: {
      type: Object,
      required: true
    },
    download: {
      type: Function,
      required: true
    },
    paginate: {
      type: Object,
      required: true
    },
    match: {
      type: Object,
      required: true
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false
    },
    searchExternal: {
      type: Boolean,
      required: false,
      default: false
    },
    searchPlaceholder: {
      type: String,
      required: false,
      default: 'Filter by Search'
    },
    footerControls: {
      type: Boolean,
      required: false,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      required: false,
      default: false
    },
    unselectableRows: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      downloadIteratee: row => ({
        Name: row.name,
        Price: '$' + row.priceSale,
        Text: row.text,
        'Text 2': row.text2,
        Number: row.number,
        'LongText': row.longContent
      })
    }
  },
  computed: {
    selectedRows () {
      return {
        0: false
      }
    },
    modifiers () {
      return {
        'is-bordered': true,
        'is-striped': true,
        'is-narrow': true,
        'is-hoverable': true,
        'is-fullwidth': true
      }
    }
  },
  methods: {
    updateExternalMatchText (event) {
      this.$emit('updateSearchText', event.target.value)
    }
  }
}
</script>

<style lang="stylus">
table.table.data-sheet-table.is-bordered
  font-size 0.9rem
  tr
    td
      border 1px solid #efefef
      border-right-width 0
    td:last-of-type
      border-right-width 1px
  tr
    th
      border 1px solid #efefef
      border-right-width 0
      background #f9f9f9
    th:last-of-type
      border-right-width 1px
.data-sheet-footer
  padding 0.5rem 0
.data-sheet-nav-control-center
  align-self center
.data-sheet-table-wrapper
  overflow-x auto
.data-sheet-rows-per-page-menu
  min-width 0
.data-sheet-rows-per-page-menu a.dropdown-item,
.data-sheet-rows-per-page-menu button.dropdown-item
  padding-right 1rem
.data-sheet-title
  align-self center
</style>
