var React = require('react');

var ReactBootstrap = require('react-bootstrap');
var ButtonGroup = ReactBootstrap.ButtonGroup;
var DropdownButton = ReactBootstrap.DropdownButton;
var MenuItem = ReactBootstrap.MenuItem;

var BarChart = require('../components/BarChart');

module.exports = React.createClass({
	displayName: "LunchStats",
	getInitialState: function() {
		return {
			selectedReportId: null
		};
	},
	selectReport: function(reportId) {
		this.props.fetchReport(reportId);
		this.setState({
			selectedReportId: reportId
		});
	},
	render: function() {
		var chart = (<div>Please select a report from above</div>);
		if (this.state.selectedReportId &&
				this.props.reports.hasOwnProperty(this.state.selectedReportId)) {
			var report = this.props.reports[this.state.selectedReportId];
			var data = report.Data;
			data.sort(function(a, b){return b.Value - a.Value;});
			var chart=(<BarChart title={report.Title} data={data}/>);
		}

		return (
			<div>
				<ButtonGroup bsClass="lunch-report-dropdown">
				<DropdownButton
						title="Select Report"
						id="lunch-report-selection-dropdown"
						onSelect={this.selectReport}>
					<MenuItem eventKey="suggestions">Suggestion Frequency</MenuItem>
					<MenuItem eventKey="non-vetoed-suggestions">Non-Vetoed Suggestions</MenuItem>
					<MenuItem eventKey="vetoed-suggestions">Vetoed Suggestions</MenuItem>
					<MenuItem eventKey="attendees">Attendee Frequency</MenuItem>
				</DropdownButton>
				</ButtonGroup>

				{chart}
			</div>
		);
	}
});