/** @format */

import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'zrender/lib/svg/svg';
// 引入提示框组件、标题组件、工具箱组件。
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markPoint';
// wordcloud词云
import 'echarts-wordcloud';

import echarts from 'echarts/lib/echarts';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

interface EchartsItemProps {
  size?: Record<string, any>;
  option?: Record<string, any>;
  notMerge?: boolean;
  showTip?: any;
}

const EchartsItem = (props: EchartsItemProps) => {
  const {
    size = { height: 500 },
    option = {},
    showTip,
    notMerge = true,
  } = props;

  const wrapperRef = useRef<HTMLDivElement>(null);
  const [echartsInc, setEchartsInc] = useState<Record<string, any> | null>(
    null,
  );

  useLayoutEffect(() => {
    if (wrapperRef && wrapperRef.current) {
      const myChart = echarts.init(wrapperRef.current, undefined, {
        devicePixelRatio: 2,
      });

      setEchartsInc(myChart);
      myChart.setOption(option);
    }
  }, []);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    echartsInc.setOption(option, { notMerge });
    if (showTip?.isShow) {
      setTimeout(function() {
        echartsInc.dispatchAction({
          type: 'showTip',
          // 显示第几个series
          seriesIndex: showTip.seriesIndex,
          // 显示第几个数据
          dataIndex: showTip.dataIndex,
          // 本次显示 tooltip 的位置。只在本次 action 中生效。
          // 缺省则使用 option 中定义的 tooltip 位置。
          position: function(val: number[]) {
            val[0] = val[0] + showTip.x;
            val[1] = val[1] + showTip.y;
            return val;
          },
        });
      });
    } else {
      echartsInc.dispatchAction({
        type: 'hideTip',
      });
    }
  }, [option, echartsInc]);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    echartsInc.resize();
  }, [size]);

  return <div className="datav-wrapper" style={size} ref={wrapperRef}></div>;
};

export default EchartsItem;