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

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

export function outputsFormColumns(editable: boolean = false, preload?: any): Schema[] {
  return [
    {
      disabled: !editable,
      type: 'input-kvs',
      name: 'outputs',
      label: '输出变量',
      value: preload,
      addButtonText: '新增输出',
      draggable: false,
      keyItem: {
        ...horizontalFormOptions(),
        label: '参数名称',
      },
      valueItems: [
        {
          ...horizontalFormOptions(),
          type: 'select',
          name: 'type',
          label: '参数',
          required: true,
          selectFirst: true,
          options: [
            {
              label: '文本',
              value: 'string',
            },
            {
              label: '数字',
              value: 'number',
            },
            {
              label: '文本数组',
              value: 'array-string',
            },
            {
              label: '对象数组',
              value: 'array-object',
            },
          ],
        },
      ],
    },
  ]
}

const AmisNode = (
  props: NodeProps,
  type: AmisNodeType,
  defaultNodeName: String,
  defaultNodeDescription?: String,
  extraNodeDescription?: (nodeData: any) => JSX.Element,
  columnSchema?: Schema[],
) => {
  const {id, data} = props
  const {getDataById, removeNode, editNode} = data
  // @ts-ignore
  const nodeData = getDataById(id)
  const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
  const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
  return (
    <div className="p-1 w-64">
      <Card
        className="node-card"
        title={nodeName}
        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,
                    defaultNodeName,
                    defaultNodeDescription,
                    [
                      {
                        type: 'input-text',
                        name: 'node.name',
                        label: '节点名称',
                        placeholder: nodeName,
                      },
                      {
                        type: 'textarea',
                        name: 'node.description',
                        label: '节点描述',
                        placeholder: nodeDescription,
                      },
                      {
                        type: 'divider',
                      },
                      ...(columnSchema ?? []),
                    ],
                  )
                  break
                case 'remove':
                  // @ts-ignore
                  removeNode(id)
                  break
              }
            },
          }}
        >
          <div className="card-description p-2 text-secondary text-sm">
            {nodeDescription}
            {extraNodeDescription?.(nodeData)}
          </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