var React = require('react');

var Chart = React.createClass({

	componentDidMount: function() {
		this._setContainSize();

		this.chart = {};
		this.chart = window.echarts.init(document.getElementById('chartContainer'));
		this.chart.setOption(this.props.option);
	},

	componentDidUpdate: function(prevProps, prevState) {
		this._setContainSize();
	},

	componentWillReceiveProps: function(nextProps) {
		if (this.isMounted()) {
			this.chart.setOption(nextProps.option);
		};
	},

	componentWillUnmount: function() {
		if (this.isMounted()) {
			this.chart.dispose();
		};
	},

	render: function() {
		return (
			<div id="chartContainer" />
		);
	},

	getCurrentChart: function() {
		if (this.isMounted()) {
			return this.chart;
		};
	},

	_setContainSize: function() {  
	  var el = this.getDOMNode();
	  //var elHeight = el.offsetHeight == 0 ? 400 : el.offsetHeight;
	  //var elWidth = el.offsetWidth == 0 ? 800 : el.offsetWidth;

	  //el.style.width = elWidth + 'px';
	  el.style.height = 100 +'%';
	}

});

module.exports = Chart;