import {Handle, type NodeProps, Position} from '@xyflow/react'
import type {Schema} from 'amis'
import {Card, Dropdown} from 'antd'
import {DeleteFilled, EditFilled} from '@ant-design/icons'
import {isEqual} from 'licia'

export type AmisNodeType = 'normal' | 'start' | 'end'

const AmisNode = (
  props: NodeProps,
  type: AmisNodeType,
  name: String,
  description?: String,
  columnSchema?: Schema[],
) => {
  const {id, data} = props
  const {getDataById, removeNode, editNode} = data
  return (
    <div className="p-1 w-64">
      <Card
        className="node-card"
        title={name}
        size="small"
        hoverable
      >
        <Dropdown
          className="card-container"
          trigger={['contextMenu']}
          menu={{
            items: [
              {
                key: 'edit',
                label: '编辑',
                icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
              },
              {
                key: 'remove',
                label: '删除',
                icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
              },
            ],
            onClick: menu => {
              switch (menu.key) {
                case 'edit':
                  // @ts-ignore
                  editNode(id, name, description, columnSchema)
                  break
                case 'remove':
                  // @ts-ignore
                  removeNode(id)
                  break
              }
            },
          }}
        >
          <div className="card-description p-2 text-secondary text-sm">
            {description}
          </div>
        </Dropdown>
      </Card>
      {isEqual(type, 'start') || isEqual(type, 'normal')
        ? <Handle type="source" position={Position.Right}/> : undefined}
      {isEqual(type, 'end') || isEqual(type, 'normal')
        ? <Handle type="target" position={Position.Left}/> : undefined}
    </div>
  )
}

export default AmisNode