import React from 'react';
import Chartist from 'chartist';
import classnames from 'classnames';

export default class Chart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dataName: '',
      dataValue: ''
    };

    this.onMouseOver = this.onMouseOver.bind(this);
  }

  componentDidMount() {
    this.updateChart(this.props);
  }

  componentWillReceiveProps(newProps) {
    this.updateChart(newProps);
  }

  componentWillUnmount() {
    this.chartist.detach();
  }

  render() {
    return (
      <div>
        <div ref = "chart"
             className = {classnames('ct-chart', this.props.classnames)}
             onMouseOver = {this.onMouseOver}></div>
        <div className = "ct-tooltip">
          <span>{this.state.dataName}</span>
          <span>{this.state.dataValue}</span>
        </div>
      </div>
    );
  }

  updateChart(props) {
    const {type, data, options = {}, responsiveOptions = [], events = {}} = props,
          create = () => {
            this.chartist = new Chartist[type](React.findDOMNode(this.refs.chart), data, options, responsiveOptions);

            Object.keys(events).forEach(x => this.chartist.on(x, events[x].bind(this.chartist)));
          };

    this.chartist ? this.chartist.update(data, options, true) :
    data.series ? create() :
    null;
  }

  onMouseOver({target}) {
    const dataName = target.parentNode.attributes['ct:name'] ? target.parentNode.attributes['ct:name'].value : '',
          dataValue = target.attributes['ct:value'] ? target.attributes['ct:value'].value : '';

    this.setState({
      dataName,
      dataValue
    });
  }
}

Chart.propTypes = {
  type: React.PropTypes.string.isRequired,
  classnames: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.object
  ]),
  data: React.PropTypes.shape({
    labels: React.PropTypes.array,
    series: React.PropTypes.array
  }),
  options: React.PropTypes.object,
  responsiveOptions: React.PropTypes.array,
  events: React.PropTypes.object
};

@@ -215,17 +215,34 @@
     data
-N
+point: %7B%0A        n
 ame: '',
@@ -252,21 +252,19 @@
     
-dataV
+  v
 alue: ''
 %0A   
@@ -259,16 +259,25 @@
 alue: ''
+,%0A      %7D
 %0A    %7D;%0A
@@ -771,32 +771,62 @@
 %0A          %3Cspan
+ className = %22ct-tooltip-name%22
 %3E%7Bthis.state.dat
@@ -826,17 +826,23 @@
 ate.data
-N
+point.n
 ame%7D%3C/sp
@@ -860,16 +860,47 @@
    %3Cspan
+ className = %22ct-tooltip-value%22
 %3E%7Bthis.s
@@ -904,25 +904,31 @@
 s.state.data
-V
+point.v
 alue%7D%3C/span%3E
@@ -1474,22 +1474,19 @@
     
-const dataName
+let $parent
  = t
@@ -1493,32 +1493,95 @@
 arget.parentNode
+;%0A%0A    this.setState(%7B%0A      datapoint: %7B%0A        name: $parent
 .attributes%5B'ct:
@@ -1589,33 +1589,23 @@
 ame'%5D ? 
-target.
+$
 parent
-Node
 .attribu
@@ -1643,21 +1643,14 @@
     
-  dataV
+v
 alue
- =
+:
  tar
@@ -1722,62 +1722,16 @@
 : ''
-;%0A
 %0A    
-this.setState(%7B%0A      dataName,%0A      dataValue
+  %7D
 %0A   

Refactor codes