var React = require('react');

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

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

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

var NewSuggestion = require('./NewSuggestion');

module.exports = React.createClass({
	displayName: "RecordLunch",
	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();

		var suggestionIds = Object.keys(this.props.suggestions);
		suggestionIds.sort();
		var suggestions = [];
		for (var i in suggestionIds) {
			var suggestion = this.props.suggestions[suggestionIds[i]];
			suggestions.push((
				<Row key={suggestion.SuggestionId}>
					<Col xs={4}>{this.props.attendees[suggestion.AttendeeId].Name}</Col>
					<Col xs={1}></Col>
					<Col xs={4}>{suggestion.RestaurantName}</Col>
				</Row>
			));
		}

		return (
			<div><form>
				<Grid><Row><Col xs={12}>
				<FormGroup controlId="attendees">
				<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>
				</Col></Row>
				<Row>
					<Col xs={4}><ControlLabel>Suggested By:</ControlLabel></Col>
					<Col xs={1}></Col>
					<Col xs={4}><ControlLabel>Restaurant Name:</ControlLabel></Col>
				</Row>
				{suggestions}
				</Grid>
				<FormGroup controlId="newsuggestion">
				<NewSuggestion
					createSuggestion={this.props.createSuggestion}
					attendees={this.props.attendees}
					suggestions={this.props.suggestions}
					popularSuggestions={this.props.popularSuggestions} />
				</FormGroup>
			</form></div>
		);
	}
});