content: import React from 'react';
  import Actions from './Actions';
  import _ from 'lodash';
  
  class Turns extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        turns: [
          {
            length:0,
            actions:[]
          }
        ]
      };
  
      this.handleOnChange = this.handleOnChange.bind(this);
      this.addTurn = this.addTurn.bind(this);
      this.addAction = this.addAction.bind(this);
      this.handleActions = this.handleActions.bind(this);
    }
  
    handleOnChange(event) {
      const propertyRegExp = /\D+/;
      let propertyResult = propertyRegExp.exec(event.target.id);
  
      const turnRegExp = /\d+/;
      let turnResult = turnRegExp.exec(event.target.id);
  
      this.setState(state => {
        state.turns[turnResult[0]][propertyResult[0]] = event.target.value;
        return state;
      })
    }
  
    addTurn(event) {
      this.setState(state => {
        state.turns.push({length:0, actions:[]});
        return state;
      });
    }
  
    addAction(action) {
      this.setState(state => {
        state.turns[action.turn].actions.push(action);
        return state;
      })
    }
  
    handleActions(action) {
      let index = action.index;
      let actionWithoutIndex = _.filter(action, (value, key) => {
        if (key !== 'index') {
          return true;
        }
      })
      this.setState(state => {
        state.turns[action.turn].actions[index] = actionWithoutIndex;
        return state;
      })
    }
  
    render() {
      const turns = this.state.turns.map((turn, index) => {
        return (
          <form className="pure-form pure-form-stacked" key={index}>
            <h5>Turn</h5>
            <label htmlFor={`length${index}`}>Length (in seconds)</label>
            <input type="text" id={`length${index}`} value={turn.length} onChange={this.handleOnChange} />
            <Actions turn={index} team={this.props.team} actions={turn.actions} addAction={this.addAction} onChange={this.handleActions} />
          </form>
      );
      });
  
      return(
        <div>
          <h4>Turns</h4>
          <button className="pure-button pure-button-primary" onClick={this.addTurn}>Add Turn</button>
          {turns}
        </div>
      );
    }
  }
  
  Turns.props = {
    onChange: React.PropTypes.func,
    team: React.PropTypes.string
  }
  
  export default Turns;
  