var ChartSettings = {
  defaultOptions : {
    toolbox: {
      show: true,
      showTitle: true,
      feature: {
        mark: {
          show: true,
          title: {
          mark: 'Mark Tool',
            markUndo: 'Undo Last Mark',
              markClear: 'Clear Marks'
          }
        },
        dataZoom: {
          show: true,
          title: {
            dataZoom: 'Range Zoom',
            dataZoomReset: 'Undo Zoom'
          },
        },           
        dataView: {
          show: true,
          title: 'Data View',
          lang: ['Data View', 'Close','Refresh']
        },
        magicType: {
          show: false
        },
        restore: { show: true, title: 'Restore'},
        saveAsImage: {
          show: true,
          title: 'Save as Image',
          lang:['Click to Save']
        }
      }
    }
  },
  theme: {
    textStyle: {
        fontFamily: 'Helvetica Neue‘, Arial, Verdana, sans-serif'
    }
  }
};

var Scatter = React.createClass({

  propTypes: {
    seriesArray: React.PropTypes.array.isRequired,
    height: React.PropTypes.number.isRequired,
    width: React.PropTypes.number.isRequired,
    xLabel: React.PropTypes.string,
    yLabel: React.PropTypes.string,
    showZoom: React.PropTypes.bool
  },

  createChart: function() {
    // Initialize after dom ready
    this.chart = echarts.init(React.findDOMNode(this), ChartSettings.theme);
    this.chart.setOption(ChartSettings.defaultOptions);
    this.updateChart(this.props);
  },

  updateChart: function(nextProps) {
    // give up quickly if props are empty.
    if (!nextProps) {
      return null;
    }
    var newChartOptions = this.makeChartOptions(nextProps);
    this.chart.setOption(newChartOptions);
  },

  makeChartOptions: function(props) {
    // seriesArray is an array of objects 
    // { name: 'series name', data: [ [x0,y0], [x1,y1], ... [xn,yn]]}
    var seriesArray = props.seriesArray;
    var echartSeriesArray = this.makeDataSeries(seriesArray);
    var xLabel = props.xLabel || '';
    var yLabel = props.yLabel || '';
    var title = props.title || '';
    var subtext = props.subtext || '';
    var options = {
      title : {
        text: title,
        subtext: subtext
      },
      series: echartSeriesArray,
      xAxis: [
        {
          name: xLabel,
          type: 'value'
        }
      ],
      yAxis: [
        {
          name: yLabel,
           type: 'value'
        }
      ],
      dataZoom: {
        show: Boolean(props.showZoom)
      },
      toolbox: {
        feature: {
          saveAsImage: { 
            name: 'scatter_' + xLabel + '_' + yLabel,
            type: 'png'
          }
        }
      },
      legend: {
        data: echartSeriesArray.map(function(series){ return series.name; }),
        orient: 'vertical',
        x: 'right',
        y: 'center'
       },
      grid: {
        borderColor: '#eee',
        x: 80,
        y: 60,
        x2: 120,
        y2: 60
      }
    };
    return options;
  },
  
  makeDataSeries: function(seriesArray) {
    return seriesArray.map(function(series, idx) {
      return {
        'name': series.name,
        'type': 'scatter',
        'data': series.data
      };
    });
  },

  componentDidMount: function() {
    this.createChart();
  },

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

  shouldComponentUpdate: function(nextProps, nextState) {
    // the component never updates and instead uses
    // willreceiveprops in order to reset the data on the chart
    return false;
  },

  componentWillReceiveProps: function(nextProps) {
    this.updateChart(nextProps);
  },

  render: function() {
    // render frame div for chart component
    return <div style = {{
          'height': this.props.height,
          'width': this.props.width
        }}/>;
  }
});

var sampling = [ ];

for (let i = 0; i < 200; i++) {
  sampling.push([i, Math.random() * i * 4]);
}

var height = 400;
var width = height * 1.6; //golden ratio
React.render(<Scatter 
             seriesArray={ [ {name: 'Universities', data: sampling} ] }
             width={width}
             height={height}
             xLabel="Hungry Students"
             yLabel="Hot Pockets Eaten"
             title="Hot Pockets Eaten By Hungry Students"
             subtext="Sampled from 200 universities"
             showZoom={true}
         />, document.getElementById('chart')
);