/**
 * Base page components.
 * @constructor Page
 *
 * 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 classnames from 'classnames'
import {ApPage} from 'apeman-react-basic'
import {ApLocaleMixin, ApToastMixin, ApPageMixin, ApPureMixin} from 'apeman-react-mixins'
import defineDebug from 'debug'

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

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

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

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

  propTypes: {
    colors: types.object.isRequired,
    locale: types.object.isRequired,
    url: types.string.isRequired,
    tab: types.string.isRequired,
    pageName: types.string.isRequired,
    rootView: types.string.isRequired
  },

  mixins: [
    ApLocaleMixin,
    ApToastMixin,
    ApPureMixin,
    ApPageMixin,
    mixins('InitMixin')
  ],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {}
  },

  render () {
    const Header = fragments('Header')
    const Main = fragments('Main')
    const Modal = fragments('Modal')
    const Toast = fragments('Toast')
    const Footer = fragments('Footer')

    const s = this
    let {state, props} = s

    return (
      <ApPage className={ classnames('page', `${s.getPageName()}-page`) }>
        <Header selectedTab={ props.tab }
            style={s.pageHeaderStyle(state)}
            modalStacker={ s.getPageStack('modal') }
            onLayout={ s.handlePageHeaderLayout }>
        </Header>
        <Toast toaster={ s.getToaster() }/>
        <Main stacker={ s.getPageStack('main') }
            stackInsets={ s.pageMainInsets(state) }
            onLayout={ s.handlePageMainLayout }>
        </Main>
        { props.children }
        <Footer>
        </Footer>
      </ApPage>
    )
  },

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

  componentWillMount () {
    const s = this
    let {props} = s

    s.initViewStacks(views, {
      main: [ props.rootView ],
      modal: []
    })
    s.initToasts({})
    s.initLocale(props.locale)
    s.initURL(props.url)
    s.initSign(props.signed)
  },

  // ------------------
  // Custom
  // ------------------
  getPageName () {
    const s = this
    let {props} = s

    return props.pageName
  }

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

export default Page