interface CustomNode {
  /** 节点名称，唯一 */
  name: string
  /** 节点 React 组件 */
  component: NsGraph.INodeRender<any>
  /** popover 组件 */
  popover?: React.Component<any>
  /** 默认标签 */
  label?: string
  /** 默认宽度 */
  width?: number
  /** 默认高度 */
  height?: number
  /** 连接锚点配置，默认上下左右四个 */
  ports?: NsGraph.INodeConfig['ports']
}

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { Input } from 'antd'
import { FlowchartFormPanel, FormWrapper } from '@antv/xflow'

const InputComponent = props => {
  const { config, plugin = {} } = props
  const { updateNode, updateEdge, updateGroup } = plugin
  const onLabelChange = e => {
    updateNode({
      label: e.target.value,
    })
  }
  return <Input value={label} onChange={onLabelChange} />
}

const RenameService = props => {
  return (
    <FormWrapper {...props}>
      {(config, plugin) => <InputComponent {...props} plugin={plugin} config={config} />}
    </FormWrapper>
  )
}
const CanvasService = props => {
  return <p style={{ textAlign: 'center' }}>主画布</p>
}
export const controlMapService = controlMap => {
  controlMap.set('rename-service', RenameService)
  controlMap.set('canvas-service', CanvasService)
  return controlMap
}

const formSchemaService = async args => {
  const { targetType } = args
  const isGroup = args.targetData?.isGroup
  const nodeSchema = {
    tabs: [
      {
        name: '设置',
        groups: [
          {
            name: 'groupName',
            controls: [
              {
                label: '节点名',
                name: '自定义form',
                shape: 'rename-service',
              },
            ],
          },
        ],
      },
    ],
  }
  if (isGroup) {
    // TODO
  }
  if (targetType === 'edge') {
    // TODO
  }
  if (targetType === 'node') {
    return nodeSchema
  }
  return {
    tabs: [
      {
        name: '设置',
        groups: [
          {
            name: 'groupName',
            controls: [
              {
                label: '',
                name: 'canvas-service',
                shape: 'canvas-service',
              },
            ],
          },
        ],
      },
    ],
  }
}

const CustomFlowchartFormPanel = () => {
  return (
    <FlowchartFormPanel
      position={{ width: 200, top: 40, bottom: 0, right: 0 }}
      controlMapService={controlMapService}
      formSchemaService={formSchemaService}
    ></FlowchartFormPanel>
  )
}

type IOnConfigChange = (params: {                          |
    data: Datum
    type: string
    config?: NsGraph.INodeConfig | NsGraph.IEdgeConfig
}) => void

<FlowchartCanvas config={{ grid: false }} />