/** @jsx React.DOM */

// TODO rename this nav.

var UnreadCount = React.createClass({
  getInitialState: function() {
    return {
      unreadCount: {}
    };
  },

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

  render: function() {
    var keys = Object.keys(this.state.unreadCount).sort();
    console.log('unread keys', keys);
    var lis = [];
    for (var i in keys) {
        var key = keys[i];
        var value = this.state.unreadCount[key];
        var dom = React.DOM.li({key: key}, React.DOM.a({href: '#'},
                    React.DOM.span({className: 'email-count'}, '(', value, ')'),
                    ' ', key
                    ));
        lis.push(dom);
    }
    console.log('Found', lis);
    // TODO rewrite as JSX template?  How to handle repreating fields?
    return React.DOM.div({id: 'nav', className: 'pure-u'},
            React.DOM.div({className: 'nav-inner'},
              React.DOM.div({
                  id: 'unread-list',
                  className: 'pure-menu pure-menu-open'
              }, React.DOM.ul({},
                  lis))));
  }
});