var React = require('react');
var R = require('ramda');
var Item = require('../components/Item');
var Dispatcher = require('../actions/Dispatcher');
var Platforms = require('../components/Platforms');
var Util = require('../Util');

// List view of the application
var List = module.exports = React.createClass({
  displayName:'ListView',
  componentWillMount: function(){
    this.onCreate= function(){
      Dispatcher.dispatch('create',null);
    }.bind(this);
    this.onFilter = function onFilter(){
      Dispatcher.dispatch('filter',{
        platforms: this.refs.platforms.getPlatforms(),
        title: React.findDOMNode(this.refs.searchTitle).value
      });
    }.bind(this);
  },
  render: function(){
    return (
      <div>
        <h2>List View</h2>
        <div className="row">
          <div className="col-lg-6">
             <Platforms platforms={this.props.platforms} ref='platforms' />
          </div>
          <div className="col-lg-6">
            <div className="input-group">
              <input type="text"
                     className="form-control"
                     ref='searchTitle'
                     defaultValue={this.props.title}
                     placeholder="Search for..."/>
              <span className="input-group-btn">
                <button className="btn btn-default"
                        onClick={this.onFilter}
                        type="button">Go!</button>
              </span>
            </div>
          </div>
        </div>
        <ul className="list-group">
          {this.props.games
               .toArray()
               .filter(Util.makeFilter(this.props.platforms,this.props.title))
               .map(createItem) }
        </ul>
        <button type="button"
                onClick={this.onCreate}
                className="btn btn-primary  btn-block">Create</button>
      </div>
    );
  }
})

List.propTypes = {
	games: React.PropTypes.object.isRequired,
  platforms: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
  title: React.PropTypes.string.isRequired
};


function createItem(game,i){
  return (<Item key={i} game={game} />);
}
