import type { XYPosition } from '@repo/workflow'
import type { FormItemRule } from 'element-plus'
import type { VNode } from 'vue'

/**
 * 渲染回调参数
 */
export interface RenderCallbackParams {
	[key: string]: any
}

/**
 * 表单项配置模型
 */
export interface ConfigSchema {
	// 其他未明确指定的属性
	[fieldName: string]: any
	/**
	 * 子节点列表，可选
	 */
	children?: ConfigSchema[]
	/**
	 * 表单控件属性，可选
	 * @example { type: 'input', options: [{ label: '用户名', value: 'username' }] }
	 */
	componentProps?: any
	/**
	 * 节点字段path，可选 获取参考lodash get方法
	 * @example 'data.username'
	 */
	field?: string
	// 是否为表单输入组件，可选
	input?: boolean
	// 节点标签，可选
	label?: string
	/**
	 * 标签配置
	 */
	labelConfig?: {
		/**
		 * 宽度，可选
		 */
		width?: number
		/**
		 * 是否显示，可选
		 */
		show?: boolean
		/**
		 * 位置，可选
		 */
		position?: 'top' | 'left'
		/**
		 * 配置提示
		 */
		tooltip?: string
	}
	// 是否无需表单项，可选
	noFormItem?: boolean
	// 事件绑定
	// 表单验证规则，可选
	rules?: FormItemRule[]
	// 是否显示（属性编辑组件可以添加函数动态显示隐藏），可选
	show?: ((renderCallbackParams: RenderCallbackParams) => boolean) | boolean
	// 插槽名称（组件为插槽类型时，需要设置插槽name），可选
	slotName?: string
	// 插槽列表，可选
	slots?: { [slotName: string]: ConfigSchema[] }
	/**
	 * 节点类型，必选
	 * @example 'text' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'time' | 'datetime' | 'color' | 'file' | 'image' | 'video' | 'audio' | 'range' | 'number' | 'password' | 'hidden' | 'button' | 'reset' | 'submit' | 'html' | 'custom'
	 */
	valueType: string
	// 渲染表单项
	render?: (renderCallbackParams: RenderCallbackParams) => Element
	// 渲染组件
	renderItem?: (renderCallbackParams: RenderCallbackParams) => Element
}

type EndpointType = string | { type: string; label: string }

export interface INodeType {
	/**
	 * 版本信息
	 */
	version: string[]
	/**
	 * 展示名称
	 */
	displayName: string
	/**
	 * 名称
	 */
	name: string
	/**
	 * 副标题 带格式化信息
	 */
	subtitle?: string
	/**
	 * 描述
	 */
	description?: string
	/**
	 * 节点图标 默认使用iconify图标名称
	 * @example 'mdi:home'
	 * 参考 https://icon-sets.iconify.design/
	 */
	icon?: string
	/**
	 * 图标颜色
	 */
	iconColor?: string
	/**
	 * 输入端口列表
	 */
	inputs: EndpointType[] | ((params: any) => EndpointType[])
	/**
	 * 输出端口列表
	 */
	outputs: EndpointType[] | ((params: any) => EndpointType[])
	/**
	 * 输出端口名称
	 */
	schema: {
		// 流程id
		appAgentId?: string
		// 父级节点Id
		parentId?: string
		// 节点位置
		position: XYPosition
		// 节点宽度
		width: number
		// 节点高度
		height: number
		// 当前是否选中
		selected: boolean
		// 节点类型
		nodeType: string
		// 节点层级
		zIndex: number
		// 节点业务数据 存储配置等
		data: Record<string, any>
	}
	/**
	 * 表单配置
	 */
	formConfig?: ConfigSchema[]
	/**
	 * 节点自定义渲染
	 */
	render?: (renderCallbackParams: RenderCallbackParams) => Element | VNode
	// 其他配置
	[key: string]: any
}

/**
 * 节点连接类型
 */
export const NodeConnectionTypes = {
	main: 'main'
}