/**
 * apeman react package for header components.
 * @class ApHeader
 */

'use strict'

import React, { PropTypes as types } from 'react'
import { withOutside } from 'apeman-react-touchable'
import { ApResizeMixin } from 'apeman-react-mixin-resize'
import classnames from 'classnames'
import events from './events'

const { addResizeHandler, removeResizeHandler } = events

/** @lends ApHeader */
const ApHeader = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {},

  mixins: [
    ApResizeMixin
  ],

  getInitialState () {
    return {
      headerHeight: 'auto'
    }
  },

  getDefaultProps () {
    return {}
  },

  render () {
    const s = this
    let { state, props } = s

    return (
      <div className='ap-header-space'
           style={ { minHeight: state.headerHeight } }>
        <header className={ classnames('ap-header', props.className) }
                style={ Object.assign({}, props.style) }
                ref={ (header) => { s.header = header } }>
          <div className='ap-header-back'></div>
          { props.children }
        </header>
      </div>
    )
  },

  // --------------------
  // Lifecycle
  // --------------------

  componentDidMount () {
    const s = this
    s.resizeHeader()
    addResizeHandler(s.resizeHeader)
  },

  componentWillUnmount () {
    const s = this
    removeResizeHandler(s.resizeHeader)
  },

  windowDidResize () {
    const s = this
    s.resizeHeader()
  },

  // ------------------
  // Custom
  // ------------------

  resizeHeader () {
    const s = this
    let { header } = s
    if (!header) {
      return
    }
    let { height } = header.getBoundingClientRect()
    s.setState({
      headerHeight: height
    })
  }

  // ------------------
  // Private
  // ------------------
})

const ApHeaderWrap = withOutside(ApHeader)
ApHeaderWrap.events = events

export default ApHeaderWrap