import React, { useRef } from 'react';
import { Tinyflow, TinyflowHandle } from '@tinyflow-ai/react';
import '@tinyflow-ai/react/dist/index.css';

const App = () => {
  const tinyflowRef = useRef<TinyflowHandle>(null);

  const handleGetData = () => {
    if (tinyflowRef.current) {
      const data = tinyflowRef.current.getData();
      console.log('Flow Data:', data);
    }
  };

  const customNodes = {
    'custom-node': {
      title: '自定义节点',
      description: '这是一个测试的自定义节点',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11H1L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11H20V20ZM18 19V9.15745L12 3.7029L6 9.15745V19H18ZM12 17L8.64124 13.6412C7.76256 12.7625 7.76256 11.3379 8.64124 10.4592C9.51992 9.58056 10.9445 9.58056 11.8232 10.4592L12 10.636L12.1768 10.4592C13.0555 9.58056 14.4801 9.58056 15.3588 10.4592C16.2374 11.3379 16.2374 12.7625 15.3588 13.6412L12 17Z"></path></svg>',
      sortNo: 2,
      render: (parent, node, flowInstance) => {
        parent.innerHTML = `<select style="width: 100%">
                <option>test</option>
                <option>test1</option>
                <option>test2</option>
                </select>`;

        parent.querySelector('select')
          ?.addEventListener('change', (e) => {
            console.log('select change: ', e);
            flowInstance.updateNodeData(node.id, {
              test: e.target.value
            });
          })
        ;

        console.log('render: ', node, flowInstance);
      },
      onUpdate: (parent, node) => {
        console.log('onUpdate: ', node);
      }

    },

    'test-node': {
      title: '测试节点',
      description: '这是一个测试的自定义节点',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11H1L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11H20V20ZM18 19V9.15745L12 3.7029L6 9.15745V19H18ZM12 17L8.64124 13.6412C7.76256 12.7625 7.76256 11.3379 8.64124 10.4592C9.51992 9.58056 10.9445 9.58056 11.8232 10.4592L12 10.636L12.1768 10.4592C13.0555 9.58056 14.4801 9.58056 15.3588 10.4592C16.2374 11.3379 16.2374 12.7625 15.3588 13.6412L12 17Z"></path></svg>',
      sortNo: 310,
      group: 'tools',
      forms: [
        {
          type: 'heading',
          label: '测试节点'
        },
        {
          type: 'input',
          name: 'test',
          label: '测试',
          placeholder: '请输入测试内容'
        },
        {
          type: 'select',
          name: 'test2',
          label: '测试2',
          placeholder: '请选择测试内容',
          defaultValue: '1',
          options: [
            {
              label: '选项1',
              value: '1'
            },
            {
              label: '选项2',
              value: '2'
            },
            {
              label: '选项3',
              value: '3'
            }
          ]
        }
      ]
    }
  };

  return (
    <div>
      <h1>Tinyflow React Example</h1>
      <Tinyflow
        ref={tinyflowRef}
        data={{
          nodes: [
            { id: '1', label: '开始', position: { x: 100, y: 100 } },
            { id: '2', label: '结束', position: { x: 300, y: 100 } },
            { id: '3', label: '结束1', position: { x: 300, y: 150 } }
          ],
          edges: [
            { source: '1', target: '2' }
          ]
        }}
        style={{ border: '1px solid #ccc' }}
        className="custom-class"
        customNodes={customNodes}
      />
      <button onClick={handleGetData}>获取流程数据</button>
    </div>
  );
};

export default App;