import React, { useRef, useEffect } from 'react';

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入图表，图表后缀都为 Chart
import {
  BarChart,
  PieChart,
  LineChart,
  GaugeChart,
  RadarChart,
  PictorialBarChart,
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent,
  DataZoomComponent,
  TransformComponent,
  VisualMapComponent,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent,
  DataZoomComponent,
  TransformComponent,
  VisualMapComponent,
  BarChart,
  PieChart,
  LineChart,
  GaugeChart,
  RadarChart,
  PictorialBarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default (props) => {
  const { className, style, option } = props;

  const domRef = useRef();
  const chartRef = useRef();

  useEffect(() => {
    if (!chartRef.current) {
      chartRef.current = echarts.init(domRef.current);
    }

    const resize = () => {
      const t = setTimeout(() => {
        clearTimeout(t);
        chartRef.current.resize();
      }, 100);
    };

    chartRef.current.setOption(option);
    resize();

    window.addEventListener('resize', resize);    
    return () => window.removeEventListener('resize', resize);
  }, [option]);

  return (
    <div className={className} style={style} ref={domRef}></div>
  )
}