import { ListOnScrollProps } from "react-window";
import { SelectOption, SelectOptionWithGroup } from "./SelectOption";
import { CommonDropdownProps, DropdownProps } from "../dropdown";
import { StyledProps } from "../_type";
import { ControlledProps } from "../form/controlled";
import { SearchBoxProps } from "../searchbox";
import { SizeType } from "../_type/Size";

export interface SelectProps extends CommonSelectProps, SingleSelectProps {}

// 兼容旧的接口
export interface SimulateSelectProps extends SelectProps {}

interface CommonSelectProps
  extends ControlledProps<
    string,
    React.SyntheticEvent,
    { event: React.SyntheticEvent; option?: SelectOptionWithGroup }
  > {
  /**
   * 下拉选项列表
   */
  options?: SelectOptionWithGroup[];

  /**
   * 分组
   */
  groups?: {
    [groupKey: string]: React.ReactNode;
  };
}

/**
 * 下拉单选 Props
 */
export interface SingleSelectProps
  extends SelectSearchProps<SelectOptionWithGroup>,
    Pick<
      DropdownProps,
      | "appearence"
      | "footer"
      | "onOpen"
      | "onClose"
      | "boxClassName"
      | "boxStyle"
    >,
    StyledProps,
    CommonDropdownProps {
  /**
   * 下拉选择类型
   * @deprecated
   */
  type?: string;

  /**
   * 🚀 是否启用虚拟滚动
   *
   * - *默认开启，开启后下拉列表宽度无法自适应宽度，可设置 `listWidth` 或 `matchButtonWidth` 控制宽度*
   * - *禁用后下拉列表默认自适应宽度，但仍可通过宽度属性控制*
   *
   * @default true
   * @since 2.7.0
   */
  virtual?: boolean;

  /**
   * 下拉列表与下拉按钮同宽
   * @default false
   * @since 2.7.0
   */
  matchButtonWidth?: boolean;

  /**
   * 下拉列表宽度
   * @since 2.5.0
   */
  listWidth?: number | string;

  /**
   * 下拉列表高度
   * @since 2.3.0
   */
  listHeight?: number;

  /**
   * 下拉按钮的内容，如果不传，默认会使用选中的选项的内容
   * @docType React.ReactNode | ((selectedOption: SelectOptionWithGroup) => React.ReactNode)
   */
  button?:
    | React.ReactNode
    | ((selectedOption: SelectOptionWithGroup) => React.ReactNode);

  /**
   * 占位符
   * @default "请选择"（已处理国际化）
   */
  placeholder?: string;

  /**
   * 是否禁用下拉选择
   * @default false
   */
  disabled?: boolean;

  /**
   * 下拉按钮的外观：
   *
   * - `default` 无边框，适用于页面标题和表格内
   * - `button` 为按钮风格，有边框，多用于操作栏中
   * - `link` 为超链接风格
   * - `filter` 为过滤组件风格，多用于表头筛选
   * - `pure` 无额外样式
   *
   * 原有 `raw` 类型建议使用 `pure` 进行改造
   *
   * @default "default"
   * @since 2.0.9
   */
  appearance?: DropdownProps["appearance"];

  /**
   * 下拉按钮尺寸，使用 `"full"` 撑满容器宽度
   * @default "m"
   */
  size?: SizeType | "auto";

  /**
   * 列表顶部状态提示
   *
   * 可使用字符串或 StatusTip 组件
   *
   * @docType React.ReactNode | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode)
   */
  tips?:
    | React.ReactNode
    | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode);

  /**
   * 列表底部状态提示
   *
   * 可使用字符串或 StatusTip 组件
   *
   * @docType React.ReactNode | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode)
   *
   * @since 2.0.9
   */
  bottomTips?:
    | React.ReactNode
    | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode);

  /**
   * `options` 滚动至底部的回调
   */
  onScrollBottom?: (props: ListOnScrollProps) => void;

  /**
   * 是否支持清空
   * @default false
   * @since 2.3.2
   */
  clearable?: boolean;

  /**
   * 是否显示刷新按钮
   *
   * @default false
   * @since 2.4.0
   */
  refreshable?: boolean;

  /**
   * 点击刷新回调
   *
   * @since 2.4.0
   */
  onRefresh?: () => Promise<void>;

  /**
   * 支持搜索
   * @default false
   */
  searchable?: boolean;

  /**
   * 是否在选中项后或下拉框收起后清空搜索框
   * @default true
   * @since 2.0.9
   */
  autoClearSearchValue?: boolean;

  /**
   * 元素聚焦事件
   * @since 2.1.1
   */
  onFocus?: React.DOMAttributes<any>["onFocus"];

  /**
   * 元素失焦事件
   * @since 2.7.0
   */
  onBlur?: React.DOMAttributes<any>["onBlur"];
}

/**
 * 多选 Props
 */
export interface SelectMultipleProps
  extends ControlledProps<string[]>,
    SelectSearchProps<SelectOptionWithGroup>,
    Pick<
      DropdownProps,
      | "appearence"
      | "footer"
      | "onOpen"
      | "onClose"
      | "boxClassName"
      | "boxStyle"
    >,
    CommonDropdownProps,
    StyledProps {
  /**
   * 选项列表
   */
  options?: SelectOptionWithGroup[];

  /**
   * 分组
   *
   * @since 2.3.5
   */
  groups?: {
    [groupKey: string]: React.ReactNode;
  };

  /**
   * 表示全选的选项
   *
   * **全选选项 `value` 只作为列表 key 使用，不决定值**
   */
  allOption?: SelectOption | false;

  /**
   * 是否暂存操作结果
   *
   * - 设置为 `true`，则会提供确定和取消按钮，确定后才会触发 onChange
   * - 设置为 `false`，则不渲染确定和取消按钮，修改后直接触发 onChange
   *
   * @default true
   */
  staging?: boolean;

  /**
   * 🚀 是否启用虚拟滚动
   *
   * - *默认禁用，下拉列表默认自适应宽度，但仍可通过宽度属性控制*
   * - *开启后下拉列表宽度无法自适应宽度，可设置 `listWidth` 或 `matchButtonWidth` 控制宽度*
   *
   * @default false
   * @since 2.7.0
   */
  virtual?: boolean;

  /**
   * 下拉列表宽度
   * @since 2.7.0
   */
  listWidth?: number | string;

  /**
   * 下拉列表高度
   * @since 2.7.0
   */
  listHeight?: number;

  /**
   * 下拉列表与下拉按钮同宽
   * @default false
   * @since 2.7.0
   */
  matchButtonWidth?: boolean;

  /**
   * 按钮显示内容，默认会显示当前选中的选项
   *
   * @docType React.ReactNode | ((selectedOptions: SelectOption[]) => React.ReactNode)
   */
  button?:
    | React.ReactNode
    | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode);

  /**
   * 占位符
   * @default "请选择"（已处理国际化）
   */
  placeholder?: string;

  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean;

  /**
   * 下拉按钮的外观：
   *
   * - `default` 无边框，适用于页面标题和表格内
   * - `button` 为按钮风格，有边框，多用于操作栏中
   * - `link` 为超链接风格
   * - `filter` 为过滤组件风格，多用于表头筛选
   * - `pure` 无额外样式
   *
   * 原有 `raw` 类型建议使用 `pure` 进行改造
   *
   * @default "default"
   * @since 2.0.9
   */
  appearance?: DropdownProps["appearance"];

  /**
   * 下拉框大小
   */
  size?: DropdownProps["size"];

  /**
   * 可使用字符串或 [StatusTip](/component/tips) 相关组件
   *
   * @docType React.ReactNode | ((selectedOptions: SelectOption[]) => React.ReactNode)
   */
  tips?:
    | React.ReactNode
    | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode);

  /**
   * 列表底部状态提示
   *
   * 可使用字符串或 StatusTip 组件
   *
   * @docType React.ReactNode | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode)
   *
   * @since 2.7.0
   */
  bottomTips?:
    | React.ReactNode
    | ((selectedOptions: SelectOptionWithGroup[]) => React.ReactNode);

  /**
   * 如果开启了全选支持，则可以指定哪些记录从全选的范围内排除
   *
   * - 默认为 'disabled' 可以排除禁用的记录
   * - 提供回调则自定义哪些记录应该排除，对于应该排除的记录，应该返回 `true`
   *
   * @default "disabled"
   */
  shouldOptionExcludeFromAll?:
    | "disabled"
    | ((option: SelectOptionWithGroup) => boolean);

  /**
   * 是否支持清空
   * @default false
   * @since 2.3.2
   */
  clearable?: boolean;

  /**
   * 允许不选择项
   *
   * @default true
   */
  allowEmpty?: boolean;

  /**
   * 是否在下拉框收起后清空搜索框
   * @default true
   * @since 2.1.0
   */
  autoClearSearchValue?: boolean;

  /**
   * 元素聚焦事件
   * @since 2.1.1
   */
  onFocus?: React.DOMAttributes<any>["onFocus"];

  /**
   * 元素失焦事件
   * @since 2.7.0
   */
  onBlur?: React.DOMAttributes<any>["onBlur"];

  /**
   * 滚动至底部的回调
   * @since 2.4.0
   */
  onScrollBottom?: () => void;

  /**
   * 点击重置按钮时回调，返回 `string[]` 可控制重置后的选中值
   * @since 2.7.4
   */
  onReset?: (context: { event: React.SyntheticEvent }) => string[] | void;
}

export interface SelectSearchProps<T> {
  /**
   * 支持搜索
   * @default false
   */
  searchable?: boolean;

  /**
   * 搜索框占位符
   */
  searchPlaceholder?: SearchBoxProps["placeholder"];

  /**
   * 自定义搜索筛选规则
   *
   * 默认根据输入值筛选
   */
  filter?: (inputValue: string, option: T) => boolean;

  /**
   * 自定义筛选后的选项渲染
   */
  filterRender?: (inputValue: string, option: T) => React.ReactNode;

  /**
   * 搜索值变化/搜索触发回调
   */
  onSearch?: SearchBoxProps["onSearch"];

  /**
   * 默认搜索值
   * @since 2.2.0
   */
  defaultSearchValue?: SearchBoxProps["defaultValue"];

  /**
   * 搜索值（受控）
   * @since 2.2.0
   */
  searchValue?: SearchBoxProps["value"];

  /**
   * 搜索值变化回调
   * @since 2.2.0
   */
  onSearchValueChange?: SearchBoxProps["onChange"];

  /**
   * **\[Deprecated\]** 请使用 `matchButtonWidth` 属性
   * @default false
   * @deprecated
   */
  boxSizeSync?: DropdownProps["boxSizeSync"];
}

/**
 * 原生单选 Props
 * @deprecated
 */
export interface NativeSelectProps extends CommonSelectProps, StyledProps {
  /**
   * 下拉选择类型
   * @deprecated
   */
  type?: string;

  /**
   * 占位符
   * @default "请选择"（已处理国际化）
   */
  placeholder?: string;

  /**
   * 是否禁用下拉选择
   * @default false
   */
  disabled?: boolean;

  /**
   * 下拉按钮尺寸，使用 `"full"` 撑满容器宽度
   */
  size?: SizeType | "auto";

  /**
   * 元素聚焦事件
   * @since 2.1.1
   */
  onFocus?: React.DOMAttributes<any>["onFocus"];

  /**
   * 元素失焦事件
   * @since 2.7.0
   */
  onBlur?: React.DOMAttributes<any>["onBlur"];
}