/* eslint-disable no-undef */
import React, { PureComponent } from 'react';
import { Chart } from '@antv/g2';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import equal from '../equal';

class BrokenLine extends PureComponent {
  componentDidMount() {
    this.renderChart(this.props.data);
    window.addEventListener('resize', this.resize);
  }

  componentWillReceiveProps(nextProps) {
    if (!equal(this.props, nextProps)) {
      this.renderChart(nextProps.data);
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
    if (this.chart) {
      this.chart.destroy();
    }
    this.resize.cancel();
  }

  @Bind()
  @Debounce(200)
  resize() {
    if (!this.node) {
      return;
    }
    this.renderChart([]);
  }

  handleRef = (n) => {
    this.node = n;
  };

  renderChart(data) {
    if (this.node.offsetWidth === 0) {
      return;
    }
    const {
      xUnit = '', yUnit = '', height, style,
    } = this.props;
    const textMyStyle = {};
    if (style !== undefined) {
      if (style.color !== undefined) {
        textMyStyle.fill = style.color;
      }
    }
    if (!data || (data && data.length < 1)) return;
    if (this.chart) {
      this.chart.destroy();
    }
    this.node.innerHTML = '';
    const chart = new Chart({
      container: this.node,
      autoFit: true, /* 图标自适应 */
      height,
      padding: 'auto',
    });
    chart.axis('x', {
      label: {
        formatter: (val) => {
          return `${val}${xUnit}`;
        },
        textStyle: textMyStyle,
      },
    });
    chart.axis('y', {
      label: {
        formatter: (val) => {
          return `${val}${yUnit}`;
        },
        textStyle: textMyStyle,
      },
    });
    chart.option('slider', {
      start: 0.9,
      end: 1,
      trendCfg: {
        isArea: false,
      },
    });
    chart.data(data);
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });
    chart.line().position('x*y').color('type').tooltip('x*y*type', (name, value, type) => {
      return {
        title: `${name}${xUnit}`,
        name: type,
        value: `${value}${yUnit}`,
      };
    });
    chart
      .point()
      .position('x*y')
      .color('type')
      .size(4)
      .shape('circle')
      .style({ stroke: '#fff', lineWidth: 1 });
    chart.render();
    this.chart = chart;
  }

  render() {
    const { height } = this.props;
    return (
      <div style={{ height }}>
        <div ref={this.handleRef} />
      </div>
    );
  }
}

export default BrokenLine;