var React = require('react');
var ItemList = require('./components/itemList');
var Router = require('react-router'),
    Route = Router.Route, DefaultRoute = Router.DefaultRoute;

var ItemWithDetailsPage = require('./components/itemWithDetailsPage');

var RouteHandler = Router.RouteHandler;

var Navigation = Router.Navigation;

var SectionsListComponent = require('./components/sectionsListComponent');

var AllItems = require('./components/allItems');

var RApp = React.createClass({

    render: function() {

        return (

<div className="container">

<div  className='page-header'>
    <h1><a href="#">Ribica.ba</a></h1>
</div>
<div className='row'>
    <div className='col-md-12' id='header'>
    <SectionsListComponent />
    </div>
</div>
<div className='row'>

<RouteHandler />

</div>

</div>
            
            );
    }
});

var StartPage = React.createClass({
    render : function() {
        return (
            <div>

            <div className='col-md-2'> 
                left content
            </div>
            <div className='col-md-10'>
                <h2>Ribica Start Page</h2>
                <AllItems />
                <RouteHandler />
            </div>
            </div>
            )
    }
});

var ByCat = React.createClass({
    render: function() {
        return (
            <div>By CAtegoriy stuff</div>
            );
    }
    
});

var BySection = React.createClass({
    mixins: [Router.State],
    render : function() {
        return ( <div>

            <div className='col-md-2'> 
                Here goes section for refining search, by section
            </div>
            <div className='col-md-10'>
                <h2> Welcome to section {this.getParams().id} </h2>
            </div>
            </div> )
    }
});


var Artikal = React.createClass({
    render: function() {
        return (
            <div>
            
            
            <ItemWithDetailsPage />
            </div>
            );
    }
});

var routes = (
        <Route name='app' path='/' handler={RApp}>
            

            <Route name='sekcija' path='sekcija/:id/:name' handler={BySection}>
          </Route>
          <Route name='artikal' path="artikal/:id/*" handler={Artikal} />

          <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCat} />
            <DefaultRoute handler={StartPage}/>
            
        </Route>
        );

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.body);
});