import React from 'react';
import classNames from 'classnames';

import ListItem from './ListItem';

export default class List extends React.Component {

  getListItems(list, childIndex = 0) {

    var items = list.map(function(item, parentIndex) {
      var key = parentIndex + '.' + childIndex;
      childIndex++;

      if (item.items) {
        return (
          <ListItem key={key} tag={item.tag} attributes={item.attributes}>
            {this.getListItems(item.items, childIndex)}
          </ListItem>
        );
      } else {
        return (
          <ListItem key={key} tag={item.tag} attributes={item.attributes}>
            {item.value}
          </ListItem>
        );
      }

    }, this);

    return items;
  }

  render() {
    var defaultClasses = [
      'list'
    ];

    var classes = classNames(
      defaultClasses.concat(
        this.props.className.split(' ')
      )
    );

    var Tag = this.props.tag;

    return (
      <Tag {...this.props} className={classes}>
        {this.getListItems(this.props.items)}
      </Tag>
    );
  }

}

List.defaultProps = {
  attributes: {
    className: ''
  },
  className: '',
  tag: 'ul'
};

List.propTypes = {
  attributes: React.PropTypes.object,
  className: React.PropTypes.string,
  items: React.PropTypes.array.isRequired,
  tag: React.PropTypes.string
};

@@ -258,16 +258,19 @@
 r key = 
+%60$%7B
 parentIn
@@ -276,17 +276,12 @@
 ndex
- + '.' + 
+%7D.$%7B
 chil
@@ -286,16 +286,18 @@
 ildIndex
+%7D%60
 ;%0A      

Use interpolation for the ListItem keys