import { css, on, off, offsetTop, debounce, isInteger } from '@vuikit/util'

export default {
  bind (el, binding, vnode) {
    vnode.context.$nextTick(() => {
      update(el, binding.modifiers, binding.value)
    })

    on(window, 'resize', debounce(() => {
      update(el, binding.modifiers, binding.value)
    }, 50), 'vk-height-viewport')
  },
  componentUpdated (el, binding, vnode) {
    vnode.context.$nextTick(() => {
      update(el, binding.modifiers, binding.value)
    })
  },
  unbind (el, binding, vnode) {
    off(window, 'resize', 'vk-height-viewport')
  }
}

function update (el, modifiers, value = {}) {
  const viewport = window.innerHeight
  let offset = 0
  let height

  css(el, 'boxSizing', 'border-box')

  if (modifiers.expand) {
    css(el, 'height', '')
    css(el, 'minHeight', '')

    const diff = viewport - document.documentElement.offsetHeight

    if (diff > 0) {
      height = `${el.offsetHeight + diff}px`
      css(el, 'minHeight', height)
    }
  } else {
    const top = offsetTop(el)

    if (top < viewport / 2 && value.offsetTop) {
      offset += top
    }

    if (value.offsetBottom === true) {
      // offset += this.$el.next().outerHeight() || 0
      offset += el.nextElementSibling.offsetHeight || 0
    } else if (isInteger(value.offsetBottom)) {
      offset += (viewport / 100) * value.offsetBottom
    } else if (value.offsetBottom && value.offsetBottom.substr(-2) === 'px') {
      offset += parseFloat(value.offsetBottom)
    }

    // TODO: support Vue el ref instead of query?
    // else if (isString(value.offsetBottom)) {
    //   var el = query(value.offsetBottom, el)
    //   offset += el && el.offsetHeight || 0
    // }

    height = offset
      ? `calc(100vh - ${offset}px)`
      : '100vh'

    css(el, 'min-height', height)
  }

  // This fix is present in UIkit but is not a good fix.
  // The component content can be updated after applying a fixed height
  // forcing the height to be lower than the page. Until better
  // approach keep this fix disabled.

  // IE 10-11 fix (min-height on a flex container won't apply to its flex items)
  // css(el, 'height', '')
  // if (height && viewport - offset >= el.offsetHeight) {
  //   css(el, 'height', height)
  // }
}

@@ -89,19 +89,23 @@
 ult %7B%0A  
-b
 in
+serte
 d (el, b
@@ -320,9 +320,9 @@
  %7D, 
-5
+2
 0), 
@@ -352,149 +352,8 @@
  %7D,%0A
-  componentUpdated (el, binding, vnode) %7B%0A    vnode.context.$nextTick(() =%3E %7B%0A      update(el, binding.modifiers, binding.value)%0A    %7D)%0A  %7D,%0A
   un
@@ -741,30 +741,8 @@
 ht%0A%0A
-    if (diff %3E 0) %7B%0A  
     
@@ -784,18 +784,16 @@
 px%60%0A    
-  
 css(el, 
@@ -813,22 +813,16 @@
 height)%0A
-    %7D%0A
   %7D else

fix height-viewport directive