import { AllowedComponentProps, VNodeProps } from '../common'

/**
 * 选择器模式
 */
declare type SelectMode = 'single' | 'multiple' | 'tags'

/**
 * 选择器大小
 */
declare type SelectSize = 'small' | 'medium' | 'large'

/**
 * 选项接口
 */
declare interface SelectOption {
    /** 选项值 */
    value: string | number
    /** 选项标签 */
    label: string
    /** 是否禁用 */
    disabled?: boolean
    /** 选项描述 */
    description?: string
    /** 分组名称 */
    // group?: string
    /** 自定义图标 */
    icon?: string
    /** 自定义样式 */
    style?: Record<string, any>
    /** 自定义类名 */
    className?: string
    /** 额外数据 */
    extra?: any
}

/**
 * 分组选项接口
 */
declare interface SelectOptionGroup {
    /** 分组标签 */
    label: string
    /** 分组值 */
    value?: string | number
    /** 分组选项 */
    options: SelectOption[]
    /** 是否禁用 */
    disabled?: boolean
}

/**
 * 选择器配置接口
 */
declare interface SelectProps {
    /** 绑定值 */
    modelValue?: string | number | Array<string | number>
    /** 选项列表 */
    options?: SelectOption[] | SelectOptionGroup[]
    /** 选择器模式 */
    mode?: SelectMode
    /** 选择器大小 */
    size?: SelectSize
    /** 占位符 */
    placeholder?: string
    /** 是否禁用 */
    disabled?: boolean
    /** 是否只读 */
    readonly?: boolean
    /** 是否可清除 */
    clearable?: boolean
    /** 是否可搜索 */
    searchable?: boolean
    /** 搜索占位符 */
    searchPlaceholder?: string
    /** 是否多选 */
    multiple?: boolean
    /** 最大标签数量 */
    maxTagCount?: number
    /** 最大标签文本长度 */
    maxTagTextLength?: number
    /** 是否显示箭头 */
    showArrow?: boolean
    /** 是否显示边框 */
    bordered?: boolean
    /** 圆角 */
    round?: boolean
    /** 阴影 */
    shadow?: boolean
    /** 是否显示下拉箭头动画 */
    animateArrow?: boolean
    /** 下拉框宽度 */
    dropdownWidth?: string | number
    /** 下拉框最大高度 */
    dropdownMaxHeight?: string | number
    /** 是否使用虚拟滚动 */
    virtualScroll?: boolean
    /** 虚拟滚动项高度 */
    virtualItemHeight?: number
    /** 分组显示 */
    group?: boolean
    /** 空状态文本 */
    emptyText?: string
    /** 加载状态 */
    loading?: boolean
    /** 加载文本 */
    loadingText?: string
    /** 远程搜索 */
    remote?: boolean
    /** 远程搜索函数 */
    remoteMethod?: (query: string) => Promise<SelectOption[]>
    /** 筛选函数 */
    filterMethod?: (query: string, option: SelectOption) => boolean
    /** 自定义选项渲染 */
    // optionRender?: (option: SelectOption) => any
    /** 自定义标签渲染 */
    // tagRender?: (option: SelectOption, onClose: () => void) => any
    /** 自定义搜索框渲染 */
    // searchRender?: (searchValue: string, onInput: (value: string) => void) => any
    /** 自定义空状态渲染 */
    // emptyRender?: () => any
    /** 自定义加载状态渲染 */
    // loadingRender?: () => any
    /** 前缀图标 */
    prefixIcon?: string
    /** 后缀图标 */
    suffixIcon?: string
    /** 自定义样式 */
    customStyle?: Record<string, any>
    /** 自定义类名 */
    customClass?: string
    /** 错误状态 */
    error?: boolean
    /** 成功状态 */
    success?: boolean
    /** 警告状态 */
    warning?: boolean
    /** 是否显示选中项数量 */
    showSelectedCount?: boolean
    /** 下拉框位置 */
    placement?: 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
    /** 下拉框动画 */
    dropdownAnimation?: boolean
    /** 下拉框动画时长 */
    dropdownAnimationDuration?: number
    /** 是否在下拉框显示时滚动到选中项 */
    scrollToSelected?: boolean
    /** 是否允许创建选项 */
    allowCreate?: boolean
    /** 创建选项的函数 */
    createMethod?: (query: string) => SelectOption
    /** 创建文本 */
    createText?: string
    /** 最大选择数量 */
    max?: number
    /** 最小选择数量 */
    min?: number,
}

/**
 * 选择器事件接口
 */
declare interface SelectEmits {
    (e: 'update:modelValue', value: string | number | Array<string | number>): void
    (e: 'change', value: string | number | Array<string | number>): void
    (e: 'focus', event: Event): void
    (e: 'blur', event: Event): void
    (e: 'clear'): void
    (e: 'search', query: string): void
    (e: 'dropdown-visible-change', visible: boolean): void
    (e: 'option-select', option: SelectOption): void
    (e: 'option-deselect', option: SelectOption): void
    (e: 'tag-remove', option: SelectOption): void
    (e: 'create', option: SelectOption): void
}

/**
 * 下拉框状态
 */
declare interface DropdownState {
    visible: boolean
    loading: boolean
    filteredOptions: SelectOption[]
    searchValue: string
    hoverIndex: number
    selectedIndex: number
}

/**
 * 虚拟滚动状态
 */
declare interface VirtualScrollState {
    startIndex: number
    endIndex: number
    visibleOptions: SelectOption[]
    totalHeight: number
    scrollTop: number
}

declare interface _Select {
    new(): {
        $props: AllowedComponentProps & VNodeProps & SelectProps
        $emit: SelectEmits
    }
}

export declare const Select: _Select

export default Select

export type {
    SelectMode,
    SelectSize,
    SelectOption,
    SelectOptionGroup,
    SelectProps,
    SelectEmits,
    DropdownState,
    VirtualScrollState
}