import { Rule } from 'ant-design-vue/es/form'
import { AutocompleteAPI } from './types/form-render-auto-complete'
import { CascaderAPI } from './types/form-render-cascader'
import { CheckboxAPI } from './types/form-render-checkbox'
import { DataApiMode, DateAPI } from './types/form-render-date'
import { DatePickerAPI } from './types/form-render-date-picker'
import { InputAPI } from './types/form-render-input'
import { InputNumberAPI } from './types/form-render-input-number'
import { InputPasswordAPI } from './types/form-render-input-password'
import { InputTextareaAPI } from './types/form-render-input-textarea'
import { MentionsAPI } from './types/form-render-mentions'
import { RadioGroupAPI } from './types/form-render-radio'
import { RangePickerAPI } from './types/form-render-range-picker'
import { RateAPI } from './types/form-render-rate'
import { SelectAPI } from './types/form-render-select'
import { SliderApi } from './types/form-render-slider'
import { SwitchAPI } from './types/form-render-switch'
import { TransferAPI } from './types/form-render-transfer'
import { TreeSelectAPI } from './types/form-render-tree-select'
import { UploadAPI } from './types/form-render-upload'
import type { Dayjs } from 'dayjs'
import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface'
export type FormValueType = string | number | boolean | Array<unknown> | symbol | object | undefined

// 有些情况的类型问题暂未解决，因此改用 unknown
export type FormDataType = Record<string, FormValueType>

export enum FormItemTypeEnum {
	INPUT = 'input',
	INPUT_PASSWORD = 'input-password',
	TEXTAREA = 'textarea',
	AUTO_COMPLETE = 'auto-complete',
	MENTION = 'mentions',
	INPUT_NUMBER = 'input-number',
	EDITOR = 'editor',
	RADIO = 'radio',
	CHECKBOX = 'checkbox',
	SELECT = 'select',
	SWITCH = 'switch',
	TIME_PICKER = 'time-picker',
	TIME_RANGE_PICKER = 'time-range-picker',
	DATE_PICKER = 'date-picker',
	RANGE_PICKER = 'range-picker',
	CASCADER = 'cascader',
	TRANSFER = 'transfer',
	TREE_SELECT = 'tree-select',
	RATE = 'rate',
	SLIDER = 'slider',
	UPLOAD = 'upload',
	CUSTOM = 'custom',
	DIVIDER = 'divider',
	TYPOGRAPHY_TEXT = 'typography-text',
	ALERT = 'alert',
	SPACE = 'space',
	ROW = 'row',
	COL = 'col',
}

export type LabelCol = {
	style?: { width: string }
	span?: number
	offset?: number
}

/**
 * 用于form-item渲染的属性
 */
export type FormItemConfig = {
	colon?: boolean
	extra?: string // 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。
	hasFeedback?: boolean
	help?: string // 提示信息，如不设置，则会根据校验规则自动生成
	htmlFor?: string
	label: string
	autoLink?: boolean
	name: string
	labelAlign?: 'left' | 'right'
	labelCol?: LabelCol
	labelType?: 'fixed' | 'responsive'
	required?: boolean
	dropdownMatchSelectWidth?: boolean | number
	validateFirst?: boolean
	dropdownMenuStyle?: object
	dropdownStyle?: object
	fieldNames?: object
	validateStatus?: 'success' | 'warning' | 'error' | 'validating'
	validateTrigger?: 'blur' | 'change' | ['change', 'blur']
	labelColFixedWidthInPx?: number
	labelColSpanWidth?: number
	useFormConfig?: boolean
}

export type DataSource = {
	key: string
	title: string
	description?: string
	disabled?: boolean
}

export type TreeData = {
	value: unknown
	label: string
	children?: Array<TreeData>
	disabled?: boolean
	disableCheckbox?: boolean
	selectable?: boolean
}

export type Option = {
	[field: string]: unknown
}

export type FormItemProperties = RadioGroupAPI &
	InputAPI &
	InputPasswordAPI &
	AutocompleteAPI &
	SwitchAPI &
	SelectAPI &
	MentionsAPI &
	InputTextareaAPI &
	InputNumberAPI &
	TransferAPI &
	CascaderAPI &
	UploadAPI &
	CheckboxAPI &
	SliderApi &
	RateAPI &
	DateAPI &
	DatePickerAPI &
	TreeSelectAPI &
	RangePickerAPI & {
		maxlength?: number
		bordered?: boolean
		disabled?: boolean
		allowClear?: boolean
		showCount?: boolean
		dataSource?: Array<DataSource>
		render?: (item: DataSource) => string
		treeData?: Array<TreeDataNode>
		treeDefaultExpandAll?: boolean
		options?: Array<Option> | { label: string; value: string | number | boolean }[] // RadioGroup 以配置形式设置子元素
		action?: string
		headers?: Record<string, string>
		controls?: boolean
		keyboard?: boolean
		max?: number
		min?: number
		precision?: number
		fieldNames?: unknown
		multiple?: boolean
		showTime?: Record<string, unknown> | boolean
		showSearch?: boolean
		format?: string | ((value: Dayjs) => string) | (string | ((value: Dayjs) => string))[]
		valueFormat?: string
		checkedChildren?: string // Switch 开关，选中时的内容
		unCheckedChildren?: string // Switch 开关，非选中时的内容
		filterOption?: (inputValue: string, option: Option) => boolean // Select 选择器，是否根据输入项进行筛选
		expandTrigger?: 'click' | 'hover'
		mode?: 'multiple' | 'tags' | 'combobox' | DataApiMode // 设置 Select 的模式为多选或标签
		autoSize?: boolean | object // 自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }
		getPopupContainer?: unknown // select，菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。
		defaultOpen?: boolean // select，是否默认展开下拉菜单
		changeOnSelect?: boolean //是否支持单选
		autofocus?: boolean //自动获得焦点
		dashed?: boolean
		required?: boolean
		text?: string
		optionType?: string
		buttonStyle?: string
	} & Record<string, string | number | boolean | Date | object | Array<object>>

export type FormItem = {
	type:
		| FormItemTypeEnum
		| 'input'
		| 'input-password'
		| 'textarea'
		| 'auto-complete'
		| 'mentions'
		| 'input-number'
		| 'editor'
		| 'radio'
		| 'checkbox'
		| 'select'
		| 'switch'
		| 'time-picker'
		| 'time-range-picker'
		| 'date-picker'
		| 'range-picker'
		| 'cascader'
		| 'transfer'
		| 'tree-select'
		| 'rate'
		| 'slider'
		| 'upload'
		| 'custom'
		| 'divider'
		| 'typography-text'
		| 'alert'
		| 'space'
		| 'row'
		| 'col' //组件类型
	group: 'form' | 'auxiliary' | 'layout' //组件分组
	config?: FormItemConfig
	properties: FormItemProperties
	propertyConfigFormComponents?: FormItem[] //表单属性配置信息
	hiddenFieldsFun?: (value: Record<string, FormValueType>) => string[] //隐藏自动的计算逻辑
	propertiesTransfer?: (value: FormItemProperties) => FormItemProperties //渲染时的值预处理器
	rules?: Array<Rule> //表单验证规则
	hidden?: boolean // 是否隐藏，隐藏后提交表单时仍然存在
	options?: Array<Option>
	ignore?: boolean // 是否忽略，隐藏后提交表单时不存在
	formItemClass?: string | Record<string, boolean>
	children?: FormItem[]
}

/**
 * 表单配置
 */
export type FormConfig = {
	layout?: 'horizontal' | 'vertical' | 'inline'
	colon?: boolean
	hideRequiredMark?: boolean
	labelAlign?: 'right' | 'left'
	labelType?: 'fixed' | 'responsive'
	scrollToFirstError?: boolean
	validateOnRuleChange?: boolean
	labelCol?: LabelCol
	wrapperCol?: LabelCol
	labelColFixedWidthInPx?: number
	labelColSpanWidth?: number
}
