/** @jsx React.DOM */

var App = React.createClass({
  getInitialState: function() {
    return {
        // TODO make this change by clicking on folder view.
        source: "/l/[all]",
        folderContent: [],
        currentMessage: null
    };
  },

  componentWillMount: function() {
      $.getJSON(this.state.source, function(result) {
          this.setState({folderContent: result});
          this.setMessage(result[0]);
      }.bind(this));
  },

  setMessage: function(msg) {
      this.setState({currentMessage: msg});
  },

  render: function() {
      if (this.state.currentMessage == null) {
          return (<div id="content" className="loading">Loading...</div>);
      }
      return (
<div id="layout" className="content pure-g">
    <NavView source="//mail.z.xinu.tv/unread"/>
    {/* TODO make '[all]' be set by clicking folders. */}
    <FolderView handleMessage={this.setMessage} folderContent={this.state.folderContent}/>
    <MainView message={this.state.currentMessage}/>
</div>
);
  }
});

React.renderComponent(<App/>, document.body);