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'),
    NavigationStore = require('../stores/navigationStore'),
    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);
    },

    shouldShowCart: function () {
        return !NavigationStore.hideCart();
    },

    render: function() {

        if (!this.state.isEverythingReadyToStartTheShow) {
            return (<div> <img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /><div> se učitava. Budite strpljivi! </div></div>);
        }

        var cart = "";

        if(this.shouldShowCart()) {
            cart = (<CartIcon />);
        }

        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-2 col-md-2 col-sm-2 col-xs-2">
                <Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
            </div>

            <div style={{padding: '30px 15px'}} className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <SearchBox />
            </div>

            <div style={{padding: '15px 15px'}} className="col-lg-4 col-md-4 hidden-sm hidden-xs">
                <nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
                    <div>
                        {cart}
                    </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;