import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';
import { Card } from 'antd';
import { IX6GraphRef } from './types';

const X6TestPage: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<IX6GraphRef>({ graph: null });

  useEffect(() => {
    if (containerRef.current) {
      // 初始化画布
      const graph = new Graph({
        container: containerRef.current,
        width: 800,
        height: 600,
        grid: true,
        background: {
          color: '#F5F5F5',
        },
        connecting: {
          snap: true,
          allowBlank: false,
          allowLoop: false,
          highlight: true,
        },
      });

      // 保存graph实例
      graphRef.current.graph = graph;

      // 创建示例节点
      const rect1 = graph.addNode({
        x: 100,
        y: 100,
        width: 100,
        height: 40,
        label: '节点 1',
        attrs: {
          body: {
            fill: '#fff',
            stroke: '#1890ff',
            strokeWidth: 1,
          },
          label: {
            fill: '#000',
          },
        },
      });

      const rect2 = graph.addNode({
        x: 300,
        y: 100,
        width: 100,
        height: 40,
        label: '节点 2',
        attrs: {
          body: {
            fill: '#fff',
            stroke: '#1890ff',
            strokeWidth: 1,
          },
          label: {
            fill: '#000',
          },
        },
      });

      // 创建连线
      graph.addEdge({
        source: rect1,
        target: rect2,
        attrs: {
          line: {
            stroke: '#1890ff',
            strokeWidth: 1,
          },
        },
      });

      // 清理函数
      return () => {
        graph.dispose();
      };
    }
  }, []);

  return (
    <Card title="X6 图形编辑器测试">
      <div 
        ref={containerRef} 
        style={{ 
          width: '100%', 
          height: '600px', 
          border: '1px solid #ddd' 
        }} 
      />
    </Card>
  );
};

export default X6TestPage;