var React = require('react');

var Store = [
	{selected: true, firstname: "Mark", lastname: "Otto", username: "@mdo"},
	{selected: false, firstname: "Jacob", lastname: "Thornton", username: "@fat"},
	{selected: true, firstname: "Larry", lastname: "the Bird", username: "@twitter"}
];
var App = React.createClass({
	render: function(){
		return (
			<div className="panel panel-default">
				<div className="panel-heading">
					<MultiSelect/>
					<ShowSelected/>
				</div>
				<div className="panel-body">
					<Table/>
				</div>
			</div>
		)
	}
});
var Table = React.createClass({
	render: function(){
		return (
			<table className="table">
				<input type="checkbox" onChange={this.handleToggle}/>
		        <thead>
		            <tr>
		                <th>#</th>
		                <th>First Name</th>
		                <th>Last Name</th>
		                <th>Username</th>
		            </tr>
		        </thead>
		        <tbody>
		            {Store.map(function(row, i) {
						return (
							<tr key={i}>
								<th scope="row">
									<input type="checkbox" defaultChecked={row.selected} onChange={Table.handleToggle}/>
								</th>
								<th>{row.firstname}</th>
								<th>{row.lastname}</th>
								<th>{row.username}</th>
							</tr>
						)
					})}
		        </tbody>
		    </table>
		)
	}
});
var MultiSelect = React.createClass({
	handleToggle: function(){
		Store = Store.map(function(user){
			user.selected = true
			return user;
		});
	},
	render: function(){
		return <input className="multi-select" type="checkbox" onChange={this.handleToggle}/>
	}
});