var React = require('react');
var AppItem = require('./app-item.jsx');

module.exports = React.createClass({

  propTypes: {

    // The app items to display in the list
    items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,

    // the parent item path
    parentPath: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.arrayOf(React.PropTypes.number)
    ]).isRequired,

    // Item click handler
    onItemClick: React.PropTypes.func.isRequired,

  },

  render: function() {

    var parentPath = this.props.parentPath;

    // For each items, we create an AppItem component
    var items = (this.props.items).map(function(item, i) {

      // The item path identifier
      var path = parentPath+'.'+i;

      return (
        <AppItem key={path} itemPath={path} item={item} onItemClick={this.props.onItemClick} />
      );

    }.bind(this));

    // Create the apps list
    return (
      <ul key={parentPath} className="apps-list">
        {items}
      </ul>
    );

  }

});