var React = require('react');

var ReactBootstrap = require('react-bootstrap');
var FormGroup = ReactBootstrap.FormGroup;
var ControlLabel = ReactBootstrap.ControlLabel;

var Multiselect = require('react-widgets').Multiselect;

var models = require('../models')
var Attendee = models.Attendee

module.exports = React.createClass({
	displayName: "RecordLunch",
	getInitialState: function() {
		return {
		};
	},
	getAttendeeList: function() {
		var attendeeList = [];
		for (var attendeeId in this.props.attendees) {
			attendeeList.push(this.props.attendees[attendeeId]);
		}
		return attendeeList;
	},
	getAttendeeMap: function() {
		var attendeeMap = {};
		for (var attendeeId in this.props.attendees) {
			var attendee = this.props.attendees[attendeeId];
			attendeeMap[attendee.Name] = attendee;
		}
		return attendeeMap;
	},
	onChangeAttendees: function(attendees) {
		var attendeeMap = this.getAttendeeMap();
		for (var i in attendees) {
			if (attendeeMap.hasOwnProperty(attendees[i].Name)) {
				delete attendeeMap[attendees[i].Name];
			} else {
				var attendee = new Attendee();
				attendee.Name = attendees[i].Name;
				this.props.createAttendee(attendee);
			}
		}
		for (var i in attendeeMap) {
			this.props.removeAttendee(attendeeMap[i]);
		}
	},
	onCreateAttendee: function(attendeeName) {
		var attendee = new Attendee();
		attendee.Name = attendeeName;
		this.props.createAttendee(attendee);
	},
	render: function() {
		var attendeeList = this.getAttendeeList();
		return (
			<div><form>
				<FormGroup>
				<ControlLabel>Attendees</ControlLabel>
				<Multiselect
					value={attendeeList}
					data={this.props.popularAttendees}
					valueField='Name'
					textField='Name'
					messages={{'createNew': "(create new attendee)"}}
					onChange={this.onChangeAttendees}
					onCreate={this.onCreateAttendee} />
				</FormGroup>
			</form></div>
		);
	}
});