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');
var RatioBarChart = require('../components/RatioBarChart');

module.exports = React.createClass({
	displayName: "LunchStats",
	getInitialState: function() {
		return {
			selectedReportId: null
		};
	},
	selectReport: function(reportId) {
		if (reportId == "suggestion-veto-ratio") {
			this.props.fetchReport("suggestions");
			this.props.fetchReport("vetoed-suggestions");
		} else {
			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;});
			chart=(<BarChart title={report.Title} data={data}/>);
		} else if (this.state.selectedReportId == "suggestion-veto-ratio" &&
				this.props.reports.hasOwnProperty("suggestions") &&
				this.props.reports.hasOwnProperty("vetoed-suggestions")) {
			chart=(<RatioBarChart
				title="Suggestion Veto Ratio"
				numerator={this.props.reports['vetoed-suggestions'].Data}
				denominator={this.props.reports['suggestions'].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="suggestion-veto-ratio">Veto Ratio</MenuItem>
					<MenuItem eventKey="attendees">Attendee Frequency</MenuItem>
				</DropdownButton>
				</ButtonGroup>

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