/**
 * React component for header.
 * @class Header
 *
 * Generated by {{generator}} on {{today}},
 * from a template provided by {{ pkg.name }}.
 *
 * @see https://facebook.github.io/react/
 */

'use strict'

import React, {PropTypes as types} from 'react'
import ReactDOM from 'react-dom'
import classnames from 'classnames'
import {
  ApHeader, ApHeaderLogo, ApHeaderTab, ApHeaderTabItem, ApHeaderMenu, ApHeaderMenuItem,
  ApContainer
} from 'apeman-react-basic'
import {ApLocaleMixin, ApLayoutMixin, ApToastMixin, ApSpinMixin} from 'apeman-react-mixins'
import defineDebug from 'debug'

import mixins from '../../mixins'
import fragments from '../fragments'
import views from '../views'

const debug = defineDebug('project:react:header')

/** @lends Header */
let Header = React.createClass({

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

  propTypes: {
    /** Name of selected tab */
    selectedTab: types.string,
    /** Callback for layout change */
    onLayout: types.func,
    /** Stacker for modal */
    modalStacker: types.object
  },

  mixins: [
    ApLocaleMixin,
    ApLayoutMixin,
    ApToastMixin,
    ApSpinMixin,
    mixins('SignMixin')
  ],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {}
  },

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

    let l = s.getLocale()
    let signed = s.getSigned()

    return (
      <ApHeader { ...props }
                className={ classnames('header', props.className)}
            >
        <ApContainer>
          { s._renderHeaderMenu(l, signed) }
          { s._renderHeaderLogo(l) }
          { s._renderHeaderTab(l) }
          { props.children }
        </ApContainer>
      </ApHeader>
    )
  },

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

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

  showSignin () {
    const SignSigninView = views('SignSigninView')
    const s = this
    let {props} = s
    props.modalStacker.pushView(SignSigninView, {})
  },

  showSignup () {
    const SignSignupView = views('SignSignupView')
    const s = this
    let {props} = s
    props.modalStacker.pushView(SignSignupView, {})
  },

  // Called by ApLayoutMixin
  doLayout () {
    const s = this,
      {props} = s
    let node = ReactDOM.findDOMNode(s)
    let layout = node.getBoundingClientRect()
    if (props.onLayout) {
      props.onLayout(layout)
    }
  },

  // ------------------
  // Private
  // ------------------

  _renderHeaderLogo(l){
    const s = this
    return (
      <ApHeaderLogo>{ l.logo.UI_LOGO }</ApHeaderLogo>
    )
  },

  _renderHeaderMenu (l, signed) {
    const s = this
    return (
      <ApHeaderMenu>
        <ApHeaderMenuItem onTap={s.showSignin}>{ l.buttons.SHOW_SIGNIN }</ApHeaderMenuItem>
        <ApHeaderMenuItem onTap={s.showSignup} primary={ true }>{ l.buttons.SHOW_SIGNUP }</ApHeaderMenuItem>
      </ApHeaderMenu>
    )
  },

  _renderHeaderTab (l) {
    const s = this
    let {props} = s
    return (
      <ApHeaderTab>
        <ApHeaderTabItem href="/other"
                 selected={props.selectedTab==='OTHER_PAGE'}>
          {l.pages.OTHER_PAGE}
        </ApHeaderTabItem>
      </ApHeaderTab>
    )
  }
})

export default Header