import type {NodeProps} from '@xyflow/react'
import {Tag} from 'antd'
import {each} from 'licia'
import React, {type JSX} from 'react'
import {horizontalFormOptions} from '../../../../util/amis.tsx'
import AmisNode from './AmisNode.tsx'

const typeMap: Record<string, string> = {
  text: '文本',
  number: '数字',
  files: '文件',
}

const StartNode = (props: NodeProps) => AmisNode({
  nodeProps: props,
  type: 'start',
  defaultNodeName: '开始节点',
  defaultNodeDescription: '定义输入变量',
  extraNodeDescription: nodeData => {
    const variables: JSX.Element[] = []
    const inputs = (nodeData?.inputs ?? {}) as Record<string, { type: string, description: string }>
    each(inputs, (value, key) => {
      variables.push(
        <div className="mt-1 flex justify-between" key={key}>
          <span>{key}</span>
          <Tag className="m-0" color="blue">{typeMap[value.type]}</Tag>
        </div>,
      )
    })
    return (
      <div className="mt-2">
        {...variables}
      </div>
    )
  },
  columnSchema: [
    {
      type: 'input-kvs',
      name: 'inputs',
      label: '输入变量',
      addButtonText: '新增入参',
      draggable: false,
      keyItem: {
        label: '参数名称',
        ...horizontalFormOptions(),
      },
      valueItems: [
        {
          ...horizontalFormOptions(),
          type: 'input-text',
          name: 'description',
          label: '参数描述',
        },
        {
          ...horizontalFormOptions(),
          type: 'select',
          name: 'type',
          label: '参数类型',
          required: true,
          selectFirst: true,
          options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
        },
      ],
    },
  ],
})

export default React.memo(StartNode)