<script>
import { filter, get, isNil, orderBy, sortBy, debounce } from 'lodash'
import { stringify } from 'flatted'
import { downloadXLSX } from '../mixins/downloadXLSX.js'
class DataSheetRowMeta {
  constructor ({
    isSelected = false
  } = {}) {
    this.isSelected = isSelected
  }
}
class DataSheetColumn {
  constructor ({
    title = '',
    value = {
      property: '',
      iteratee: row => (row[this.value.property || 'value'] || '')
    },
    key = '',
    isVisible = true,
    format = {
      align: 'center',
      vAlign: 'middle',
      whitespace: 'initial'
    },
    orderBy = {
      iteratee: row => (this.value.iteratee(row) || row[this.value.property || 'value'] || ''),
      direction: '',
      sortOrder: 0
    }
  } = {}) {
    this.title = title
    this.value = value
    this.key = key
    this.isVisible = isVisible
    this.format = format
    this.orderBy = orderBy
  }
}
export default {
  name: 'DataSheet',
  props: {
    model: {
      type: Array,
      required: true,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      required: true,
      default () {
        return []
      }
    },
    keyIteratee: {
      type: Function,
      required: false,
      default: (row, model, columns) => Object.keys(row).length ? Object.keys(row)[0] : row['id'] || row['key']
    },
    downloadIteratee: {
      type: Function,
      required: false,
      default: row => row
    },
    downloadFileName: {
      type: String,
      required: false,
      default: () => `data-sheet-${new Date().toISOString().split('T')[0]}`
    }
  },
  mixins: [downloadXLSX],
  data () {
    return {
      state: {
        columns: this.columns,
        pagination: {
          rowsPerPage: 50,
          offset: 0
        },
        search: {
          matchText: '',
          matchProperty: '',
          matchType: 'indexOf'
        },
        settings: {
          isVisible: false
        }
      },
      filters: {},
      meta: {},
      isSelectAll: false
    }
  },
  render () {
    return this.$scopedSlots.default({
      ...this.$props,
      displayModel: this.displayModel,
      displayModelSlice: this.displayModelSlice,
      displayColumns: this.displayColumns,
      columnar: {
        alignment: this.columnAlignment,
        whitespace: this.columnWhitespace,
        toggleSortDirection: this.toggleSortDirection,
        columns: this.columnsByValueProperty
      },
      filters: {
        active: this.filters,
        add: this.addFilter,
        clear: this.clearFilters,
        remove: this.removeFilter
      },
      select: {
        hasSelected: this.hasSelected,
        isSelected: this.isSelected,
        isSelectAll: this.isSelectAll,
        toggle: this.toggle,
        select: this.select,
        deselect: this.deselect,
        toggleAll: this.toggleAll,
        selectAll: this.selectAll,
        deselectAll: this.deselectAll
      },
      paginate: {
        pageForward: this.pageForward,
        pageBack: this.pageBack,
        setRowsPerPage: this.setRowsPerPage,
        offset: this.state.pagination.offset,
        rowsPerPage: this.state.pagination.rowsPerPage
      },
      match: {
        text: this.state.search.matchText,
        property: this.state.search.matchProperty,
        updateMatchText: this.updateMatchText
      },
      download: this.download,
      settings: {
        show: this.showSettings,
        hide: this.hideSettings,
        toggle: this.toggleSettings
      }
    })
  },
  computed: {
    hasSelected () {
      let hasSelected = false
      for (const key in this.meta) {
        hasSelected = this.meta[key] && this.meta[key].isSelected
        if (hasSelected) {
          break
        }
      }
      return hasSelected
    },
    columnAlignment () {
      let columnAlignment = {}
      for (let column of this.displayColumns) {
        const classes = {}
        classes[`text-align-${column.format.align}`] = true
        classes[`vertical-align-${column.format.vAlign}`] = true
        columnAlignment[column.key] = classes
      }
      return columnAlignment
    },
    columnWhitespace () {
      let columnWhitespace = {}
      for (let column of this.displayColumns) {
        const classes = {
          'ws-no-wrap': column.format.whitespace === 'nowrap',
          'ws-inherit': column.format.whitespace === 'inherit',
          'ws-initial': column.format.whitespace === 'initial',
          'ws-normal': column.format.whitespace === 'normal',
          'ws-pre': column.format.whitespace === 'pre',
          'ws-pre-line': column.format.whitespace === 'pre-line',
          'ws-pre-wrap': column.format.whitespace === 'pre-wrap',
          'ws-unset': column.format.whitespace === 'unset'
        }
        columnWhitespace[column.key] = classes
      }
      return columnWhitespace
    },
    displayModel () {
      let displayModel = filter([...this.model], row => {
        let predicateResult = true
        // Filter Rows
        for (const key in this.filters) {
          predicateResult = predicateResult && this.filters[key](row)
        }
        // Search Rows
        if (this.getSafe(() => this.state.search.matchText.length, false)) {
          const text = this.getSafe(() => this.state.search.matchProperty.length, false) ? stringify(get(row, this.state.search.matchProperty)) : stringify(row)
          if (this.state.search.matchType === 'RegExp') {
            predicateResult = predicateResult && text.match(new RegExp(this.state.search.matchText, 'i'))
          } else {
            predicateResult = predicateResult && text.toLowerCase().indexOf(this.state.search.matchText.toLowerCase()) >= 0
          }
        }
        return predicateResult
      })
      // Meta
      for (let i = 0; i < displayModel.length; i++) {
        if (isNil(this.getSafe(() => this.meta[this.keyIteratee(displayModel[i])]), null)) {
          this.$set(this.meta, this.keyIteratee(displayModel[i]), new DataSheetRowMeta())
        }
      }
      // Sort
      if (this.getSafe(() => this.sortColumns.directions.length, false)) {
        displayModel = orderBy(displayModel, this.sortColumns.iteratees, this.sortColumns.directions)
      }
      return displayModel
    },
    displayModelSlice () {
      const displayModelSlice = Array.from(this.displayModel)
      if (displayModelSlice.length <= this.state.pagination.rowsPerPage) {
        return displayModelSlice
      } else {
        return displayModelSlice.slice(this.state.pagination.offset * this.state.pagination.rowsPerPage, this.state.pagination.rowsPerPage + this.state.pagination.offset * this.state.pagination.rowsPerPage)
      }
    },
    displayColumns () {
      // Props Columns
      let columns = this.state.columns.map(column => new DataSheetColumn(column))
      // Default Columns from First Row Properties
      if (!columns.length && this.displayModel.length) {
        const firstRow = this.displayModel[0]
        columns = Object.keys(firstRow).map(key => {
          return new DataSheetColumn({
            title: key,
            value: {
              property: key
            },
            key: key
          })
        })
      }
      // Filter Visible Columns
      const displayColumns = filter([...columns], column => {
        return column.isVisible
      })
      return displayColumns
    },
    columnsByValueProperty () {
      const columns = {}
      for (let i = 0; i < this.displayColumns; i++) {
        columns[this.displayColumns[i].value.property] = this.displayColumns[i]
      }
      return columns
    },
    sortColumns () {
      let columns = Array.from(this.displayColumns)
      // Filter Columns by Active Direction
      columns = filter(columns, column => column.orderBy.direction.length)
      // Sort By Column Sort
      columns = sortBy(columns, column => column.orderBy.sortOrder)
      return {
        iteratees: columns.map(column => column.orderBy.iteratee),
        directions: columns.map(column => column.orderBy.direction)
      }
    },
    // Paginate
    getPagination () {
      const pagesShown = 10
      const totalPages = Math.ceil(this.displayModel.length / this.state.pagination.rowsPerPage)
      let returnData = []
      const min = (this.state.pagination.offset - 4 < 0 ? 0 : this.state.pagination.offset - 4)
      const max = min + pagesShown
      let i = 0
      while (i < totalPages) {
        if (i >= min && i <= max) {
          returnData.push(i + 1)
        }
        i++
      }
      if (min >= 1) {
        returnData[0] = 1
        returnData.splice(1, 1, '...')
      }
      if (max < totalPages) {
        returnData[returnData.length - 1] = totalPages - 1
        returnData[returnData.length] = totalPages
        returnData.splice(returnData.length - 3, 1, '...')
      }
      return returnData
    }
  },
  methods: {
    updateMatchText: debounce(function (event = {}) {
      this.state.search.matchText = event.target.value
    }, 50),
    // Download
    download () {
      let download = [...this.displayModel]
      if (this.downloadIteratee) {
        download = download.map(row => {
          return this.downloadIteratee(row)
        })
      }
      this.downloadXLSX(download, this.downloadFileName)
    },
    // Utility
    getSafe (fn, fallback = null) {
      try {
        const result = fn()
        return result || fallback
      } catch (err) {
        const response = fallback === null ? undefined : fallback
        return response
      }
    },
    // Filters
    addFilter (filter) {
      this.$set(this.filters, filter.name, filter.predicate)
    },
    clearFilters () {
      this.filters = {}
    },
    removeFilter (name) {
      this.$delete(this.filters, name)
    },
    // Selected
    isSelected (row) {
      return this.meta[this.keyIteratee(row)].isSelected
    },
    toggle (row) {
      if (this.getSafe(() => this.meta[this.keyIteratee(row)].isSelected, false)) {
        this.deselect(row)
      } else {
        this.select(row)
      }
    },
    select (row) {
      this.$set(this.meta[this.keyIteratee(row)], 'isSelected', true)
    },
    deselect (row) {
      this.isSelectAll = false
      this.$set(this.meta[this.keyIteratee(row)], 'isSelected', false)
    },
    toggleAll () {
      if (this.isSelectAll || this.hasSelected) {
        this.deselectAll()
      } else {
        this.selectAll()
      }
    },
    selectAll () {
      this.isSelectAll = true
      for (const key in this.meta) {
        this.$set(this.meta[key], 'isSelected', true)
      }
    },
    deselectAll () {
      this.isSelectAll = false
      for (const key in this.meta) {
        this.$set(this.meta[key], 'isSelected', false)
      }
    },
    // Sort
    toggleSortDirection (column) {
      if (column.orderBy.direction === 'desc') {
        column.orderBy.direction = ''
      } else if (column.orderBy.direction === 'asc') {
        column.orderBy.direction = 'desc'
      } else if (column.orderBy.direction === '') {
        column.orderBy.direction = 'asc'
      }
    },
    // Paginate
    setRowsPerPage (rowsPerPage) {
      this.state.pagination.rowsPerPage = isNaN(+rowsPerPage) ? 50 : +rowsPerPage
    },
    pageBack () {
      this.state.pagination.offset = this.state.pagination.offset - 1 >= 0 ? this.state.pagination.offset - 1 : 0
    },
    pageForward () {
      this.state.pagination.offset = this.state.pagination.offset + 1 < this.getPagination[this.getPagination.length - 1] ? this.state.pagination.offset + 1 : this.getPagination[this.getPagination.length - 1] - 1
    },
    // Settings
    showSettings () {
      this.state.settings.isVisible = true
    },
    hideSettings () {
      this.state.settings.isVisible = false
    },
    toggleSettings () {
      this.state.settings.isVisible = !this.state.settings.isVisible
    }
  }
}
</script>

<style>
/* Heading & Cell Alignment */
.table th.text-align-center, .text-align-center {
  text-align: center;
}
.table th.text-align-left, .text-align-left {
  text-align: left;
}
.table th.text-align-right, .text-align-right {
  text-align: right;
}
.table th.vertical-align-middle, .table td.vertical-align-middle {
  vertical-align: middle;
}
.table th.vertical-align-top, .table td.vertical-align-top {
  vertical-align: top;
}
.table th.vertical-align-bottom, .table td.vertical-align-bottom {
  vertical-align: bottom;
}
/*Whitespace Control*/
.table .ws-no-wrap {
  white-space: nowrap;
}
.table .ws-inherit {
  white-space: inherit;
}
.table .ws-initial {
  white-space: initial;
}
.table .ws-normal {
  white-space: normal;
}
.table .ws-pre {
  white-space: pre;
}
.table .ws-pre-line {
  white-space: pre-line;
}
.table .ws-pre-wrap {
  white-space: pre-wrap;
}
.table .ws-unset {
  white-space: unset;
}
</style>
