import { Area } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  function createPathRender(compute) {
    return (group, options, document) => {
      if (!group.handle) {
        const path = document.createElement('path');
        group.handle = path;
        group.appendChild(group.handle);
      }
      const { handle } = group;
      const { x, y, width, height, ...rest } = options;
      if (width === undefined || height === undefined) return handle;
      handle.attr({ ...compute(x, y, width, height), ...rest });
      return handle;
    };
  }
  const config1 = {
    height: 360,
    paddingLeft: 50,
    interaction: {
      brushXFilter: true,
      tooltip: false,
    },
    axis: {
      y: {
        grid: false,
        tickCount: 5,
      },
      x: {
        grid: false,
        title: false,
        tickCount: 5,
      },
    },
    animate: false,
    yField: 'close',
    xField: 'date',
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
    },
    onReady: ({ chart }) => {
      ref1.current = chart;
      // 添加事件监听器在不同图表之间交流
      chart.on('brush:filter', (e) => {
        const { nativeEvent } = e;
        if (!nativeEvent) return;
        const { selection } = e.data;
        const { x: scaleX } = chart.getScale();
        const [[x1, x2]] = selection;
        const domainX = scaleX.getOptions().domain;
        if (x1 === domainX[0] && x2 === domainX[1]) {
          ref2.current.emit('brush:remove', {});
        } else {
          ref2.current.emit('brush:highlight', { data: { selection } });
        }
      });
    },
  };

  const config2 = {
    interaction: {
      brushXHighlight: {
        series: true,
        maskOpacity: 0.3,
        maskFill: '#777',
        maskHandleEFill: '#D3D8E0',
        maskHandleWFill: '#D3D8E0',
      },
      tooltip: false,
    },
    paddingLeft: 50,
    paddingTop: 0,
    paddingBottom: 0,
    height: 60,
    axis: false,
    animate: false,
    yField: 'close',
    xField: 'date',
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
    },
    onReady: ({ chart }) => {
      ref2.current = chart;
      chart.on('brush:highlight', (e) => {
        const { nativeEvent, data } = e;
        if (!nativeEvent) return;
        const { selection } = data;
        ref1.current.emit('brush:filter', { data: { selection } });
      });

      chart.on('brush:remove', (e) => {
        const { nativeEvent } = e;
        if (!nativeEvent) return;
        const { x: scaleX, y: scaleY } = chart.getScale();
        const selection = [
          scaleX.getOptions().domain,
          scaleY.getOptions().domain,
        ];
        ref1.current.emit('brush:filter', { data: { selection } });
      });
    },
  };

  return (
    <div>
      <Area {...config1} />
      <Area {...config2} />
    </div>
  );
};

createRoot(document.getElementById('container')).render(<Demo />);