/** @jsx React.DOM */

var Summary = React.createClass({
    handleClick: function(e) {
        this.props.handleMessage(this.props.message);
    },

    render: function() {
        var m = this.props.message;
        return (
<div key={m.Hash} onClick={this.handleClick}
    className={m.Seen ? "email-item pure-g" : "email-item pure-g email-item-unread"}>
    <div className="pure-u">
        <h5 className="email-name">{m.From}</h5>
        <h4 className="email-subject">{m.Subject}</h4>
        <p className="email-desc">{m.Summary}</p>
    </div>
</div>
);
    }
});

var FolderView = React.createClass({
    propTypes: {
        folderContent: React.PropTypes.array.isRequired,
        handleMessage: React.PropTypes.func.isRequired
    },

    // Highlight types: email-item-{selected,unread} and none
    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.
        var messages = this.props.folderContent,
            view = this;
        return (
<div id="list" className="pure-u-1">
{messages.map(function(m) {
    return <Summary key={m.Hash} handleMessage={view.props.handleMessage} message={m}/>
})}
</div>
        );
    }
});