var React = require('react');
var classNames = require('classnames');
var ReactDOM = require('react-dom');


var ProgressBar = React.createClass({
	componentDidMount: function() {
		$(ReactDOM.findDOMNode(this.refs.progressBar)).animate({
		    width: this.props.percent+"%"
		}, 500);
	},
  componentWillReceiveProps: function(nextProps) {
    $(ReactDOM.findDOMNode(this.refs.progressBar)).animate({
        width: nextProps.percent+"%"
    }, 50);
  },
	getDefaultProps: function(){
		return{
			percent: ''
		};
	},
	render: function() {
		// console.log(0<40<33);
		// if((0<this.props.percent)&&(this.props.percent<33)){
		// 	var className = 'progress-bar progress-bar-danger';
		// }
		// else if((33<this.props.percent)&&(this.props.percent<66)){

		// 	var className = 'progress-bar progress-bar-warning';
		// }
		// else{
		// 	var className = 'progress-bar progress-bar-success';
		// }
		return (
			<div className="progress progress-striped active">
			  <div className='progress-bar' ref="progressBar" role="progressbar" aria-valuenow={this.props.percent}
			  aria-valuemin="0" aria-valuemax="100" title={this.props.percent+"%"} style={{"width":"0%"}}>
			   <span>
			   {this.props.content}
			   </span>
			  </div>
			</div>
		);
	}

});

module.exports = ProgressBar;
