import type {NodeProps} from '@xyflow/react'
import React, {useCallback} from 'react'
import AmisNode, {nodeClassName, outputsFormColumns, StartNodeHandler} from './AmisNode.tsx'
import {horizontalFormOptions} from '../../../util/amis.tsx'
import {typeMap} from '../../../pages/ai/task/InputSchema.tsx'
import type {FormSchema, OutputVariableType} from '../types.ts'
import {isEmpty} from 'licia'

const originTypeMap: Record<string, OutputVariableType> = {
  text: 'text',
  textarea: 'text',
  number: 'number',
  files: 'array-text',
}

const InputNode = (props: NodeProps) => {
  const formSchema: () => FormSchema = useCallback(() => ({
    events: {
      change: {
        actions: [
          {
            actionType: 'validate',
          },
          {
            actionType: 'custom',
            // @ts-ignore
            script: (context, doAction, event) => {
              let data = event?.data
              console.log(data)
              if (data && isEmpty(data?.validateResult?.error ?? undefined)) {
                let inputs = data.validateResult?.payload?.inputs ?? {}
                if (inputs) {
                  let outputs: Record<string, { type: OutputVariableType }> = {}
                  for (let key of Object.keys(inputs)) {
                    outputs[key] = {
                      type: originTypeMap[inputs[key].type],
                    }
                  }
                  doAction({
                    actionType: 'setValue',
                    args: {
                      value: {
                        outputs
                      },
                    },
                  })
                }
              }
            },
          },
        ]
      }
    },
    columns: [
      {
        type: 'input-kvs',
        name: 'inputs',
        label: '输入变量',
        required: true,
        addButtonText: '新增入参',
        draggable: false,
        keyItem: {
          label: '参数名称',
          ...horizontalFormOptions(),
          validations: {
            isAlphanumeric: true,
          },
        },
        valueItems: [
          {
            ...horizontalFormOptions(),
            type: 'input-text',
            name: 'label',
            required: true,
            label: '中文名称',
            clearValueOnEmpty: true,
            clearable: true,
          },
          {
            ...horizontalFormOptions(),
            type: 'input-text',
            name: 'description',
            label: '参数描述',
            clearValueOnEmpty: true,
            clearable: true,
          },
          {
            ...horizontalFormOptions(),
            type: 'select',
            name: 'type',
            label: '参数类型',
            required: true,
            selectFirst: true,
            options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
          },
          {
            ...horizontalFormOptions(),
            type: 'switch',
            name: 'required',
            label: '是否必填',
            required: true,
            value: true,
          },
        ],
      },
      {
        type: 'divider',
      },
      ...outputsFormColumns(false, false),
    ]
  }), [props.id])

  return (
    <AmisNode
      className={nodeClassName('input')}
      nodeProps={props}
      formSchema={formSchema}
      handler={<StartNodeHandler/>}
    />
  )
}

export default React.memo(InputNode)