/**
 * @author: dennis hernández
 * @website: http://djhvscf.github.io/blog
 * @update zhixin wen <wenzhixin2010@gmail.com>
 */

const debounce = (func, wait) => {
  let timeout = 0

  return (...args) => {
    const later = () => {
      timeout = 0
      func(...args)
    }

    cleartimeout(timeout)
    timeout = settimeout(later, wait)
  }
}

$.extend($.fn.bootstraptable.defaults, {
  mobileresponsive: false,
  minwidth: 562,
  minheight: undefined,
  heightthreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  checkoninit: true,
  columnshidden: []
})

$.bootstraptable = class extends $.bootstraptable {
  init (...args) {
    super.init(...args)

    if (!this.options.mobileresponsive || !this.options.minwidth) {
      return
    }

    if (this.options.minwidth < 100 && this.options.resizable) {
      console.warn('the minwidth when the resizable extension is active should be greater or equal than 100')
      this.options.minwidth = 100
    }

    let old = {
      width: $(window).width(),
      height: $(window).height()
    }

    $(window).on('resize orientationchange', debounce(() => {
      // reset view if height has only changed by at least the threshold.
      const width = $(window).width()
      const height = $(window).height()
      const $activeelement = $(document.activeelement)

      if ($activeelement.length && ['input', 'select', 'textarea'].includes($activeelement.prop('nodename'))) {
        return
      }

      if (
        math.abs(old.height - height) > this.options.heightthreshold ||
        old.width !== width
      ) {
        this.changeview(width, height)
        old = {
          width,
          height
        }
      }
    }, 200))

    if (this.options.checkoninit) {
      const width = $(window).width()
      const height = $(window).height()

      this.changeview(width, height)
      old = {
        width,
        height
      }
    }
  }

  conditioncardview () {
    this.changetableview(false)
    this.showhidecolumns(false)
  }

  conditionfullview () {
    this.changetableview(true)
    this.showhidecolumns(true)
  }

  changetableview (cardviewstate) {
    this.options.cardview = cardviewstate
    this.toggleview()
  }

  showhidecolumns (checked) {
    if (this.options.columnshidden.length > 0) {
      this.columns.foreach(column => {
        if (this.options.columnshidden.includes(column.field)) {
          if (column.visible !== checked) {
            this._togglecolumn(this.fieldscolumnsindex[column.field], checked, true)
          }
        }
      })
    }
  }

  changeview (width, height) {
    if (this.options.minheight) {
      if ((width <= this.options.minwidth) && (height <= this.options.minheight)) {
        this.conditioncardview()
      } else if ((width > this.options.minwidth) && (height > this.options.minheight)) {
        this.conditionfullview()
      }
    } else if (width <= this.options.minwidth) {
      this.conditioncardview()
    } else if (width > this.options.minwidth) {
      this.conditionfullview()
    }

    this.resetview()
  }
}