import { CSSProperties, VNode } from 'vue'
import { OptionKeys, OptionProps } from './index'
import { BaseProps } from './props-base'

/**
 * ### 自动完成的属性
 */
export interface AutoCompleteProps extends BaseProps {
	/**
	 * 支持清除, 单选模式有效
	 */
	allowClear?: boolean
	/**
	 * 自动获取焦点
	 */
	autofocus?: boolean
	/**
	 * 使用键盘选择选项的时候把选中项回填到输入框中
	 */
	backfill?: boolean
	/**
	 * default (自定义输入框)
	 */
	'#default'?: HTMLInputElement | HTMLTextAreaElement
	/**
	 * 自动完成的数据源
	 */
	options?: Array<OptionProps> | Array<object>
	/**
	 * 通过 option 插槽，自定义节点
	 * @param value
	 * @param label
	 * @param disabled
	 * @param key
	 * @param title
	 */
	option?: (value: string, label: string, disabled: boolean, key: string, title: string) => VNode
	/**
	 * 自定义 options 中 label name children 的字段
	 */
	fieldNames?: OptionKeys
	/**
	 * dropdown 菜单自定义样式
	 */
	dropdownMenuStyle?: CSSProperties
	/**
	 * 是否默认高亮第一个选项。
	 */
	defaultActiveFirstOption?: boolean
	/**
	 * 下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动
	 */
	dropdownMatchSelectWidth?: boolean | number
	/**
	 * 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。
	 */
	filterOption?:
		| boolean
		| ((
				value: string | string[] | { key: string; label: string } | Array<{ key: string; label: string }>,
				option: Array<OptionProps> | Array<object>
		  ) => boolean)
	/**
	 * 是否默认展开下拉菜单
	 */
	defaultOpen?: boolean
	/**
	 * 是否展开下拉菜单
	 */
	open?: boolean

	/**
	 * 额外字段
	 */
	extraNames?: AutoCompleteExtraProps
}

export interface AutoCompleteExtraProps {
	// 拼接后的label
	label?: string
	// 拼接后的value
	value?: string
	// 所有选中的选项
	option?: string
}