/// <reference types="react" />

import * as React from "react";

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  defaultValue?: any;
  onChange?: any;
}

export interface ComboboxProps extends HTMLAttributesWeak {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 弹层挂载容器节点
   */
  container?: string | (() => void);

  /**
   * 选择器的尺寸
   */
  size?: "small" | "medium" | "large";

  /**
   * 选择器的形状
   */
  shape?: "normal" | "arrow-only";

  /**
   * 没有值的时候的占位符
   */
  placeholder?: string;

  /**
   * 当前值
   */
  value?: string | Array<any> | React.ReactNode | {};

  /**
   * 初始默认值
   */
  defaultValue?: string | Array<any> | React.ReactNode | {};

  /**
   * 当前弹层是否显示
   */
  visible?: boolean;

  /**
   * 弹层初始是否显示
   */
  defaultVisible?: boolean;

  /**
   * 是否禁用
   */
  disabled?: boolean;

  /**
   * 传入的数据，可以动态渲染子项,详见[dataSource的使用](#dataSource的使用)
   */
  dataSource?: Array<any>;

  /**
   * 是否是多选
   */
  multiple?: boolean;

  /**
   * 是否启用标签模式, 仅在多选时有效,效果是除了自动提示外的选项, 也可以使用输入的文字作为标签
   */
  tags?: boolean;

  /**
   * 填充到选择框里面的值
   */
  fillProps?: string;

  /**
   * 是否显示顶部的搜索框
   */
  showSearch?: boolean;

  /**
   * 在输入的时候过滤的函数,仅在filterLocal为true时候有效
   */
  filterBy?: (filterValue: string, option: {}) => boolean;

  /**
   * 是否使用本地过滤,在数据源为远程的时候需要关闭此选项
   */
  filterLocal?: boolean;

  /**
   * 是否显示右侧的箭头
   */
  hasArrow?: boolean;

  /**
   * 下拉菜单是否与选择器对齐
   */
  autoWidth?: boolean;

  /**
   * 选择后是否立即隐藏菜单，单选是默认隐藏的，因此该选项只在多选的时候有效
   */
  hiddenSelected?: boolean;

  /**
   * Combobox在用户输入的时候触发的回调
   */
  onInputUpdate?: (value: string) => void;

  /**
   * Combobox获取焦点的时候触发的回调
   */
  onInputFocus?: (e: any, clickByUser: boolean) => void;

  /**
   * Combobox失去焦点的时候触发的回调
   */
  onInputBlur?: (e: any, inputValue: string) => void;

  /**
   * Combobox回车的时候触发的回调
   */
  onInputEnter?: (e: any) => void;

  /**
   * Combobox发生改变的时候触发的回调, 注意在输入的时候该事件不会被触发，如果需要监听输入的事件请使用onInputUpdate
   */
  onChange?: (value: string, option: {}) => void;

  /**
   * 在搜索框中输入触发的事件，仅在showSearch为true时候有效
   */
  onSearch?: (value: string) => void;

  /**
   * 是否显示清空按钮，该按钮可以清空select的value, 该属性仅在单选模式下有效
   */
  hasClear?: boolean;

  /**
   * 弹出层的样式类
   */
  popupClassName?: string;

  /**
   * 弹出层的属性
   */
  popupProps?: {};

  /**
   * 弹层显示或隐藏的时候触发的事件
   */
  onVisibleChange?: (visible: boolean) => void;

  /**
   * 弹层显示时触发的事件
   */
  onOpen?: () => void;

  /**
   * 弹层隐藏时触发的事件
   */
  onClose?: () => void;

  /**
   * 自定义国际化文案对象
   */
  locale?: {
    selectPlaceHolder: string;
    comboboxPlaceHolder: string;
  };

  /**
   * 自定义国际化语言
   */
  language?: "en-us" | "zh-cn" | "zh-tw";
}

export class Combobox extends React.Component<ComboboxProps, any> {}

export interface OptionGroupProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 设置分组的文案
   */
  label?: string | React.ReactNode;
}

export class OptionGroup extends React.Component<OptionGroupProps, any> {}

export interface OptionProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 选项值
   */
  value?: any;

  /**
   * 是否禁用
   */
  disabled?: boolean;
}

export class Option extends React.Component<OptionProps, any> {}
interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
  defaultValue?: any;
  onChange?: any;
}

export interface SelectProps extends HTMLAttributesWeak {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 自定义内联样式
   */
  style?: React.CSSProperties;

  /**
   * 弹层挂载容器节点
   */
  container?: string | (() => void);

  /**
   * 选择器的尺寸
   */
  size?: "small" | "medium" | "large";

  /**
   * 选择器的形状
   */
  shape?: "normal" | "arrow-only";

  /**
   * 没有值的时候的占位符
   */
  placeholder?: string;

  /**
   * 当前值
   */
  value?: string | number | Array<any> | {};

  /**
   * 初始默认值
   */
  defaultValue?: string | Array<any> | {};

  /**
   * 当前弹层是否显示
   */
  visible?: boolean;

  /**
   * 弹层初始是否显示
   */
  defaultVisible?: boolean;

  /**
   * 是否禁用
   */
  disabled?: boolean;

  /**
   * 传入的数据，可以动态渲染子项,详见[dataSource的使用](#dataSource的使用)
   */
  dataSource?: Array<any>;

  /**
   * 是否是多选
   */
  multiple?: boolean;

  /**
   * 填充到选择框里面的值
   */
  fillProps?: string;

  /**
   * 是否显示顶部的搜索框
   */
  showSearch?: boolean;

  /**
   * 在输入的时候过滤的函数,仅在filterLocal为true时候有效
   */
  filterBy?: (filterValue: string, option: {}) => boolean;

  /**
   * 是否使用本地过滤,在数据源为远程的时候需要关闭此选项
   */
  filterLocal?: boolean;

  /**
   * 是否显示右侧的箭头
   */
  hasArrow?: boolean;

  /**
   * 下拉菜单是否与选择器对齐
   */
  autoWidth?: boolean;

  /**
   * Select发生改变的时候触发的回调
   */
  onChange?: (value: string, option: {}) => void;

  /**
   * 在搜索框中输入触发的事件，仅在showSearch为true时候有效
   */
  onSearch?: (value: string) => void;

  /**
   * 是否显示清空按钮，该按钮可以清空select的value, 该属性仅在单选模式下有效
   */
  hasClear?: boolean;

  /**
   * 弹出层的样式类
   */
  popupClassName?: string;

  /**
   * 弹出层的属性
   */
  popupProps?: {};

  /**
   * 弹层显示或隐藏的时候触发的事件
   */
  onVisibleChange?: (visible: boolean) => void;

  /**
   * 弹层显示时触发的事件
   */
  onOpen?: () => void;

  /**
   * 弹层隐藏时触发的事件
   */
  onClose?: () => void;

  /**
   * 自定义国际化文案对象
   */
  locale?: {
    selectPlaceHolder: string;
    comboboxPlaceHolder: string;
  };

  /**
   * 自定义国际化语言
   */
  language?: "en-us" | "zh-cn" | "zh-tw";
}

export default class Select extends React.Component<SelectProps, any> {
  static Combobox: typeof Combobox;
  static OptionGroup: typeof OptionGroup;
  static Option: typeof Option;
}