var React = require('react'),
    MenuItemListComponent = require('./shared/menuItemListComponent'),
    SectionListComponent = require('./shared/sectionsListComponent'),

    Router = require('react-router'),
    Link = Router.Link,
    RouteHandler = Router.RouteHandler,
    LoginStatus = require('./shared/loginStatus'),
    InitializationStore = require('../stores/initializationStore'),
    InitializationActions = require('../actions/initializationActions');

var CartIcon = require('./cart/cartIcon');
var SearchBox = require('./shared/searchBox');

var RootApp = React.createClass({

     // Add change listeners to stores
    componentDidMount: function() {
      InitializationStore.addChangeListener(this._onChange);
      InitializationActions.initialize();
    },


    getInitialState: function() {
      return InitializationStore.getState();
    },


    _onChange: function () {
      if (this.isMounted()) {
        this.setState(InitializationStore.getState());
      }
    },

    componentWillUnmount: function () {
      InitializationStore.removeChangeListener(this._onChange);
    },

    render: function() {

        if (!this.state.isEverythingReadyToStartTheShow) {
            return (<div>loading...</div>);
        }

        return ( 
<div className="container">
    <div>
        <div className="col-lg-12 hidden-sm hidden-xs " style={{height: 80, background: 'none', marginBottom: '0px !important'}} id="mybody">
            <div style={{padding: '15px 15px'}} className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
            </div>
            <div style={{padding: '15px 15px'}} className="col-lg-9 col-md-9 hidden-sm hidden-xs">
                <nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
                    <div className="container-fluid">
                        <CartIcon />
                    </div>
                </nav>
            </div>
        </div>
        <div style={{margin: '0 !important'}} className="clearfix" >
        </div>
    </div>
    <div>
        <MenuItemListComponent />
    </div>

     <div className='row'>
            <RouteHandler />
    </div>
</div>
);



    }
});

module.exports = RootApp;