'use strict';

const React = require('react');
const {RouteHandler} = require('react-router');
const {provideContext, connectToStores} = require('fluxible/addons');

const AppStore = require('../stores/AppStore');
const NavComponent = require('../components/NavComponent');

const AppHandler = React.createClass({

  displayName: 'AppHandler',

  contextTypes: {
    router: React.PropTypes.func.isRequired,
    getStore: React.PropTypes.func.isRequired,
    executeAction: React.PropTypes.func.isRequired
  },

  render() {
    return (
      <div id='main'>
        <NavComponent {...this.props} />
        <article>
          <RouteHandler context={this.context} />
        </article>
      </div>
    );
  }

});

module.exports = provideContext(connectToStores(AppHandler, [AppStore], (stores) => {
  return stores.AppStore.getState();
}));