/** @jsx React.DOM */

/*
<div class="email-item email-item-selected pure-g">
    <div class="pure-u">
        <img class="email-avatar" alt="Tilo Mitra&#x27;s avatar" height="64" width="64" src="img/common/tilo-avatar.png">
    </div>

    <div class="pure-u-3-4">
        <h5 class="email-name">Tilo Mitra</h5>
        <h4 class="email-subject">Hello from Toronto</h4>
        <p class="email-desc">
            Hey, I just wanted to check in with you from Toronto. I got here earlier today.
        </p>
    </div>
</div>
*/

var FolderView = React.createClass({
  getInitialState: function() {
    return {
      list: {}
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
        console.log('FolderView $.get', result);
        this.setState({list: result});
    }.bind(this));
  },

  render: function() {
      // TODO:
      // - fill this out with data
      // - make unread conditional
      // - remove profile pic
      // - drop message excerpt
      // - trim 'Re:' from messages and group/thread them.
    return (
<div id="list" className="pure-u-1">
    <div className="email-item email-item-selected pure-g">
        <div className="pure-u">
            <img className="email-avatar" alt="Tilo Mitra&#x27;s avatar" height="64" width="64" src="img/common/tilo-avatar.png" />
        </div>

        <div className="pure-u-3-4">
            <h5 className="email-name">Tilo Mitra</h5>
            <h4 className="email-subject">Hello from Toronto</h4>
            <p className="email-desc">
                Hey, I just wanted to check in with you from Toronto. I got here earlier today.
            </p>
        </div>
    </div>
</div>
);
  }
});

React.renderComponent(
  // TODO make '[all]' be set by clicking folders.
  <FolderView source="/l/[all]" />,
  $('#list').get(0)
);