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 Panel = ReactBootstrap.Panel;
var Button = ReactBootstrap.Button;

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(function(a, b){return parseInt(b, 10) - parseInt(a, 10);});
		var suggestions = [];
		for (var i in suggestionIds) {
			var suggestion = this.props.suggestions[suggestionIds[i]];
			var suggestorName = "Unknown";
			if (this.props.attendees.hasOwnProperty(suggestion.AttendeeId))
					suggestorName = this.props.attendees[suggestion.AttendeeId].Name;

			if (i == 0) {
				var self = this;
				var localSuggestion = suggestion;
				var popFunction = function(){
					return function(){self.props.removeSuggestion(localSuggestion);};
				}();
				suggestions.push((
					<Row key={suggestion.SuggestionId}><Panel>
						<Col xs={4}><ControlLabel>Current Suggestion:</ControlLabel></Col>
						<Col xs={1}></Col>
						<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
						<Col xs={1}></Col>
						<Col xs={2}>
							<Button bsStyle="danger" onClick={popFunction}>Pop</Button>
						</Col>
					</Panel></Row>
				));
			} else {
				suggestions.push((
					<Row key={suggestion.SuggestionId}>
						<Col xs={4}><ControlLabel>{(suggestionIds.length - i).toString() + "."}</ControlLabel></Col>
						<Col xs={1}></Col>
						<Col xs={4}>{suggestion.RestaurantName} (by {suggestorName})</Col>
						<Col xs={1}></Col>
						<Col xs={2}>
						</Col>
					</Row>
				));
			}
		}

		return (
			<div><form>
				<Grid fluid><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>
				<NewSuggestion
					createSuggestion={this.props.createSuggestion}
					attendees={this.props.attendees}
					suggestions={this.props.suggestions}
					popularSuggestions={this.props.popularSuggestions} />
				{suggestions}
				</Grid>
			</form></div>
		);
	}
});