content: import React from 'react';
  import ReactDOM from 'react-dom';
  import { Loading } from './loading.js';
  
  export const MesCanFine = React.createClass({ 
  	getInitialState() { 
  		return null;
  	 },
  
  	getFine() { 
  		var seltext = this.refs.month_dd.selectedOptions[0].innerText;
  		for (var i = 0; i < this.props.fines.length; i++) { 
  			var elementone = this.props.fines[i];
  			if (elementone.McMonth === seltext) { 
  				this.refs.output_lbl.innerText = elementone.Mc;
  				this.setState({ fine: elementone.Mc });
  				this.setState({ month: seltext });
  				break;
  			 }
  		 }
  	 },
  
  	propTypes: { 
  		loading: React.PropTypes.bool,
  		fines: React.PropTypes.array,
  		months: React.PropTypes.array,
  		date: React.PropTypes.object,
  		latestmonth: React.PropTypes.string,
  		latestfine: React.PropTypes.number
  	 },
  
  	render() { 
  		if (this.props.loading) { 
  			return <div className="middle">
  				<Loading/>
  			</div>
  		 } else { 
  			var options = [];
  			var fines = [];
  			var date = "";
  			var seltext = "";
  			if (this.props.date !== undefined) { 
  				date = this.props.date.EffectiveDateStr;
  			 }
  			if (this.props.months.length > 0) { 
  				for (var index = 0; index < this.props.months.length; index++) { 
  					var element = this.props.months[index];
  					options.push(
  						<option key={ element._id } value={ element.Value }>{ element.Value }</option>
  					);
  				 }
  			 }
  			if (this.state !== null) { 
  				fines.push(
  					<label key={ 21 } ref="output_lbl">{ this.state.fine }</label>
  				);
  				seltext = this.state.month;
  			 } else { 
  				fines.push(
  					<label key={ 21 } ref="output_lbl">{ this.props.latestfine }</label>
  				);
  				seltext = this.props.latestmonth;
  			 }
  			return (
  				<div className="col-md-4 col-md-offset-4">
  					<table className="table table-bordered table-condensed table-striped">
  						<thead>
  							<tr>
  								<th colSpan="3" className="text-center h4">
  									<strong>Mess Canteen Fine</strong>
  								</th>
  							</tr>
  						</thead>
  						<tbody>
  							<tr>
  								<th className="text-center mes-can-fine">
  									Effective Date
  								</th>
  								<td className="text-center">
  									{ date }
  								</td>
  							</tr>
  							<tr>
  								<th className="text-center mes-can-fine">
  									Bill Month
  								</th>
  								<td className="text-center">
  									<select autoFocus="autofocus" value={ seltext } onChange={ this.getFine } className="text-center" ref="month_dd">
  										{ options }
  									</select>
  								</td>
  							</tr>
  							<tr>
  								<th className="text-center mes-can-fine">
  									Fine
  								</th>
  								<td className="text-center">
  									{ fines }
  								</td>
  							</tr>
  						</tbody>
  					</table>
  				</div>
  			);
  		 }
  	 }
   });
  