import { isSSR } from './platform'
import { listenOpts } from '../utils/event'
import { debounce } from '../utils/debounce'

export default {
  width: 1024,

  sizes: {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },

  lt: {
    xl: true
  },
  gt: {
    xs: true,
    sm: true,
    md: true
  },
  lg: true,

  __installed: false,
  install ({ $q, Vue }) {
    if (this.__installed) { return }
    this.__installed = true

    if (isSSR) {
      this.$q.screen = this
      return
    }

    const style = getComputedStyle(document.body)

    // if css props available
    if (style.getPropertyValue('--q-size-sm')) {
      ['sm', 'md', 'lg', 'xl'].forEach(name => {
        this.sizes[name] = parseInt(style.getPropertyValue(`--q-size-${name}`), 10)
      })
    }

    let update = () => {
      const
        w = window.innerWidth,
        s = this.sizes

      if (w === this.width) {
        return
      }

      this.width = w

      this.gt.xs = w >= s.sm
      this.gt.sm = w >= s.md
      this.gt.md = w >= s.lg
      this.gt.lg = w >= s.xl
      this.lt.sm = w < s.sm
      this.lt.md = w < s.md
      this.lt.lg = w < s.lg
      this.lt.xl = w < s.xl
      this.xs = this.lt.sm
      this.sm = this.gt.xs && this.lt.md
      this.md = this.gt.sm && this.lt.lg
      this.lg = this.gt.md && this.lt.xl
      this.xl = w > s.xl
    }

    update()
    update = debounce(update, 100)

    window.addEventListener('resize', update, listenOpts.passive)

    this.setSizes = sizes => {
      ['sm', 'md', 'lg', 'xl'].forEach(name => {
        if (sizes[name]) {
          this.sizes[name] = sizes[name]
        }
      })
      update()
    }

    Vue.util.defineReactive($q, 'screen', this)
  }
}

@@ -1366,22 +1366,29 @@
 e()%0A    
+let 
 update
+Evt
  = debou
@@ -1449,16 +1449,19 @@
 , update
+Evt
 , listen
@@ -1658,24 +1658,288 @@
 date()%0A    %7D
+%0A    this.setDebounce = delay =%3E %7B%0A      window.removeEventListener('resize', updateEvt, listenOpts.passive)%0A      updateEvt = delay %3E 0%0A        ? debounce(update, delay)%0A        : update%0A      window.addEventListener('resize', updateEvt, listenOpts.passive)%0A    %7D
 %0A%0A    Vue.ut

add setDebounce() method