/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
'use strict'

import './refresh.css'

const parents = ['scroller', 'list', 'vlist']

// Only if pulldown offset is larger than this value can this
// component trigger the 'refresh' event, otherwise just recover
// to the start point.
const DEFAULT_CLAMP = 130
const DEFAULT_ALIGN_ITEMS = 'center'
const DEFAULT_JUSTIFY_CONTENT = 'center'

function adjustHeight (refresh, val) {
  refresh.node.style.height = val + 'px'
}

// function adJustPosition (refresh, val) {
//   refresh.node.style.top = -val + 'px'
// }

function handleRefresh (refresh, e) {
  refresh.node.style.height = refresh.clamp + 'px'
  refresh.dispatchEvent('refresh')
  refresh.isRefreshing = true
}

function show (refresh) {
  refresh.display = true
  refresh.node.style.display = '-webkit-box'
  refresh.node.style.display = '-webkit-flex'
  refresh.node.style.display = 'flex'
}

function hide (refresh) {
  refresh.display = false
  refresh.node.style.display = 'none'
  refresh.isRefreshing = false
}

const proto = {
  create () {
    const node = document.createElement('div')
    node.classList.add('weex-container')
    node.classList.add('weex-refresh')
    return node
  },

  onAppend () {
    const parent = this.getParent()
    const self = this
    if (parents.indexOf(parent.data.type) === -1) {
      // not in a scroller or a list
      return
    }
    this.refreshPlaceholder = document.createElement('div')
    this.refreshPlaceholder.classList.add('weex-refresh-placeholder')
    this.refreshPlaceholder.style.display = 'none'
    this.refreshPlaceholder.style.width = '0px'
    this.refreshPlaceholder.style.height = '0px'
    const scrollElement = parent.scrollElement || parent.listElement
    scrollElement.insertBefore(this.refreshPlaceholder, this.node)
    parent.node.appendChild(this.node)
    parent.scroller.addEventListener('pulldown', function (e) {
      if (self.isRefreshing) {
        return
      }
      adjustHeight(self, Math.abs(e.scrollObj.getScrollTop()))
      if (!self.display) {
        show(self)
      }
    })
    parent.scroller.addEventListener('pulldownend', function (e) {
      if (self.isRefreshing) {
        return
      }
      const top = Math.abs(e.scrollObj.getScrollTop())
      if (top > self.clamp) {
        handleRefresh(self, e)
      }
      else {
        hide(self)
      }
    })
  }
}

const attr = {
  display: function (val) {
    if (val === 'show') {
      setTimeout(function () {
        show(this)
      }.bind(this), 0)
    }
    else if (val === 'hide') {
      setTimeout(function () {
        hide(this)
      }.bind(this), 0)
    }
    else {
      console.error('[h5-render] attr \'display\' of <refresh>\': value '
        + val
        + ' is invalid. Should be \'show\' or \'hide\'')
    }
  }
}

const style = {
  height: function (val) {
    val = parseFloat(val)
    if (isNaN(val) || val < 0) {
      return console.warn('[h5-render] <refresh>\'s height (' + val + ') is invalid.')
    }
    this.clamp = val
  }
}

function init (Weex) {
  const Component = Weex.Component
  const extend = Weex.utils.extend

  function Refresh (data) {
    this.isRefreshing = false
    this.clamp = data.style.height || DEFAULT_CLAMP
    !data.style.alignItems && (data.style.alignItems = DEFAULT_ALIGN_ITEMS)
    !data.style.justifyContent
      && (data.style.justifyContent = DEFAULT_JUSTIFY_CONTENT)
    Component.call(this, data)
  }
  Refresh.prototype = Object.create(Component.prototype)
  extend(Refresh.prototype, proto)
  extend(Refresh.prototype, { attr })
  extend(Refresh.prototype, {
    style: extend(Object.create(Component.prototype.style), style)
  })

  Weex.registerComponent('refresh', Refresh)
}

export default { init }