import React, { memo, useEffect, useMemo, useRef } from 'react';
import { BasicChart } from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, { alarmMarkLine } from './utils';
import { isArray, cloneDeep } from 'lodash';

const SimgleChart = memo((props) => {
  const {
    dataSource,
    contrast = false,
    contrastOption = 'day',
    smooth = true,
    curveCenter,
    showGridLine = false,
    deviceAlarmSchemes,
  } = props;
  const chartRef = useRef();

  const option = useMemo(() => {
    const config = {
      needUnit: true,
      curveCenter,
      showGridLine,
      deviceAlarmSchemes,
    };
    return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
  }, [dataSource, smooth, curveCenter]);

  useEffect(() => {
    chartRef.current?.resize?.();
    const chart = chartRef.current?.getEchartsInstance?.();

    function hander(params) {
      const { selected } = params;
      const count = Object.values(selected || {}).filter((item) => item).length;
      const option = cloneDeep(chart.getOption());
      const needMarkLine = count === 1;
      option.series.forEach((item, index) => {
        item.markLine =
          needMarkLine && selected[item.name]
            ? alarmMarkLine(dataSource[index], index, [dataSource[index]], deviceAlarmSchemes)
            : {};
      });
      chart.setOption(option, true);
    }
    if (!chart) return;
    chart.on('legendselectchanged', hander);
    return () => {
      chart.off('legendselectchanged', hander);
    };
  }, [dataSource, deviceAlarmSchemes]);

  // 网格开关，不更新整个图表
  useEffect(() => {
    const chart = chartRef.current?.getEchartsInstance?.();
    if (!chart) return;
    const option = chart.getOption();
    // 交互指针
    const tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: showGridLine ? 'cross' : 'line',
      },
    };
    // 网格线
    const axisConfig = {
      minorTick: {
        show: showGridLine,
      },
      minorSplitLine: {
        show: showGridLine,
      },
      // splitLine: {
      //   show: showGridLine,
      // },
    };
    let yAxis = axisConfig;
    if (isArray(option.yAxis)) {
      yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
    }
    chart.setOption({
      yAxis,
      tooltip,
    });
  }, [showGridLine]);

  // 数据都为空显示缺省页
  const isEmpty = useMemo(
    () =>
      !dataSource ||
      !dataSource.length ||
      !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
    [dataSource],
  );

  return isEmpty ? (
    <PandaEmpty />
  ) : (
    <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
  );
});

export default SimgleChart;