/** 下拉项接口 */
export interface DropdownItem {
    /** 值 */
    value: string;
    /** 显示文本 */
    text: string;
    /** 源码显示内容 */
    html?: HTMLElement | string;
}

/** 下拉框选项接口 */
export interface DropdownOptions {
    /** 文本关键字，默认值 `text` */
    textKey?: string;
    /** 值关键字，默认值 `value` */
    valueKey?: string;
    /** 源码显示的关键字，默认值 `html` */
    htmlKey?: string;
    /** 源码显示的模板函数 */
    htmlTemplate?: (item: DropdownItem) => HTMLElement;
    /** 最大输入长度，默认值 `500` */
    maxLength?: number;
    /** 是否允许多选 */
    multiSelect?: boolean;
    /** 选中值 */
    selected?: string;
    /** 选中的数组 */
    selectedList?: Array<string>;
    /** 是否禁用 */
    disabled?: boolean;
    /** 是否支持输入 */
    input?: boolean;
    /** 是否支持搜索 */
    search?: boolean;
    /** 搜索的关键字数组 */
    searchKeys?: Array<string>;
    /** 搜索提示文本，默认值取语言资源 `searchHolder` "Search..." */
    searchPlaceholder?: string;
    /** 焦点索引 */
    tabIndex?: number;
    /** 输入框的提示文本 */
    placeholder?: string;
    /** 是否固定为向下展开 */
    slideFixed?: boolean;
    /** 父元素，默认添加到头元素之后 */
    wrapper?: HTMLElement;
}

/** 下拉框类 */
export class Dropdown {
    /**
     * 把父元素下的所有 `select` 元素修改为统一下拉框组件<br/><br/>
     * 解析的属性为 `value`, `disabled`, `tabIndex`
     * @param dom 父元素
     * @param trigger 选中事件触发函数（上下文为触发选中的 `Dropdown` 实例）
     * @returns 返回该父元素
     */
    static resolve(dom?: HTMLElement, trigger?: (item: DropdownItem) => void): HTMLElement;

    /**
     * 下拉框的构造函数
     * @param options 下拉框选项
     */
    constructor(options?: DropdownOptions);

    /** 根据该函数返回数据源 */
    sourceFilter: () => Array<DropdownItem>;
    /**
     * 选中时触发
     * @param item 选中的条目
     * @eventProperty
     */
    onSelected: (item: DropdownItem) => void;
    /**
     * 选中多个时触发
     * @param list 选中的条目数组
     * @eventProperty
     */
    onSelectedList: (list: Array<DropdownItem>) => void;
    /**
     * 下拉框展开时触发
     * @eventProperty
     */
    onExpanded: () => void;
    /**
     * 下拉框收缩时触发
     * @eventProperty
     */
    onCollapsed: () => void;

    /** 获取下拉框是否禁用 */
    get disabled(): boolean;
    /**
     * 设置下拉框禁用状态
     * @param flag 禁用状态
     */
    set disabled(flag: boolean);
    /** 获取数据源 */
    get source(): Array<DropdownItem>;
    /**
     * 设置数据源
     * @param list 数据源
     */
    set source(list: Array<DropdownItem>);

    /** 获取是否允许多选 */
    get multiSelect(): boolean;
    /** 获取选中的条目 */
    get selected(): DropdownItem;
    /** 获取选中的条目列表 */
    get selectedList(): Array<DropdownItem>;

    /**
     * 创建下拉框元素
     * @returns 返回创建的下拉框元素
     */
    create(): HTMLElement;
    /**
     * 选中某个条目
     * @param selected 选中的值
     * @param silence 是否静默选中，即不触发 {@linkcode onSelected} 事件
     * @param ignoreCase 是否不区分大小写
     * @returns 是否选中
     */
    select(selected: string, silence?: boolean, ignoreCase?: boolean): boolean | undefined;
    /**
     * 选中条目列表
     * @param selectedlist 选中的值的列表
     * @param silence 是否静默选中，即不触发 {@linkcode onSelected} 事件
     */
    selectlist(selectedlist: Array<string>, silence?: boolean): void;
}