import {Handle, type NodeProps, Position} from '@xyflow/react'
import {Tag} from 'antd'
import React from 'react'
import AmisNode from './AmisNode.tsx'

const cases = [
  {
    index: 1,
  },
  {
    index: 2,
  },
  {
    index: 3,
  },
]

const SwitchNode = (props: NodeProps) => AmisNode({
  nodeProps: props,
  type: 'normal',
  defaultNodeName: '分支节点',
  defaultNodeDescription: '根据不同的情况前往不同的分支',
  columnSchema: () => [],
  // @ts-ignore
  extraNodeDescription: nodeData => {
    return (
      <div className="mt-2">
        {cases.map(item => (
          <div key={item.index} className="mt-1">
            <Tag className="m-0" color="blue">分支 {item.index}</Tag>
          </div>
        ))}
      </div>
    )
  },
  // @ts-ignore
  handlers: nodeData => {
    return (
      <>
        <Handle type="target" position={Position.Left}/>
        {cases.map((item, index) => (
          <Handle
            type="source"
            position={Position.Right}
            key={item.index}
            id={`${item.index}`}
            style={{top: 85 + (25 * index)}}
          />
        ))}
      </>
    )
  },
})

export default React.memo(SwitchNode)