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

import * as React from "react";

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

export interface ColumnGroupProps extends HTMLAttributesWeak {
  /**
   * 表头显示的内容
   */
  title?: React.ReactElement<any> | React.ReactNode | (() => void);
}

export class ColumnGroup extends React.Component<ColumnGroupProps, any> {}

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

export interface ColumnProps extends HTMLAttributesWeak {
  /**
   * 指定列对应的字段，支持`a.b`形式的快速取值
   */
  dataIndex?: string;

  /**
   * 行渲染的逻辑
   * Function(value, index, record) => Element
   */
  cell?: React.ReactElement<any> | React.ReactNode | (() => void);

  /**
   * 表头显示的内容
   */
  title?: React.ReactElement<any> | React.ReactNode | (() => void);

  /**
   * 是否支持排序
   */
  sortable?: boolean;

  /**
   * 在锁列的情况下需要配置的宽度
   */
  width?: React.ReactNode;

  /**
   * 单元格的对齐方式
   */
  align?: "left" | "center" | "right";

  /**
   * 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]`
   */
  filters?: Array<any>;

  /**
   * 过滤的模式是单选还是多选
   */
  filterMode?: "single" | "multiple";

  /**
   * 是否支持锁列,可选值为`left`,`right`, `true`
   */
  lock?: boolean | string;
}

export class Column extends React.Component<ColumnProps, any> {}

export interface GroupHeaderProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 行渲染的逻辑
   */
  cell?: React.ReactElement<any> | React.ReactNode | (() => void);

  /**
   * 是否在GroupHeader上面渲染selection
   */
  hasSelection?: boolean;
}

export class GroupHeader extends React.Component<GroupHeaderProps, any> {}
export interface TableProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * 样式类名的品牌前缀
   */
  prefix?: string;

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

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

  /**
   * 表格展示的数据源
   */
  dataSource?: Array<any>;

  /**
   * 是否启用选择模式
   */
  rowSelection?: {
    getProps: () => void;
    onChange: () => void;
    onSelect: () => void;
    onSelectAll: () => void;
    selectedRowKeys: Array<any>;
    mode: string;
  };

  /**
   * 点击表格每一行触发的事件
   */
  onRowClick?: (record: {}, index: number, e: any) => void;

  /**
   * 悬浮在表格每一行的时候触发的事件
   */
  onRowMouseEnter?: (record: {}, index: number, e: any) => void;

  /**
   * 离开表格每一行的时候触发的事件
   */
  onRowMouseLeave?: (record: {}, index: number, e: any) => void;

  /**
   * 点击列排序触发的事件
   */
  onSort?: (dataIndex: string, order: string) => void;

  /**
   * 点击过滤确认按钮触发的事件
   */
  onFilter?: (filterParams: {}) => void;

  /**
   * 设置每一行的样式名称
   */
  getRowClassName?: (record: {}, index: number) => string;

  /**
   * 设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。
   */
  getRowProps?: (record: {}, index: number) => {};

  /**
   * 设置单元格的属性，通过该属性可以进行合并单元格
   */
  getCellProps?: (
    rowIndex: number,
    colIndex: number,
    record: {},
    value: any,
    dataIndex: string
  ) => {};

  /**
   * 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条
   */
  fixedHeader?: boolean;

  /**
   * 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条
   */
  maxBodyHeight?: number;

  /**
   * 表格是否具有边框
   */
  hasBorder?: boolean;

  /**
   * 表格是否具有头部
   */
  hasHeader?: boolean;

  /**
   * 表格是否是斑马线
   */
  isZebra?: boolean;

  /**
   * 表格是否在加载中
   */
  isLoading?: boolean;

  /**
   * dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中
   */
  primaryKey?: string;

  /**
   * 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}}
   * 示例:
   * 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中
   * `<Table filterParams={{id: {selectedKeys: ['one']}}}/>`
   */
  filterParams?: {};

  /**
   * 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'}
   */
  sort?: {};

  /**
   * 额外渲染行的渲染函数
   */
  expandedRowRender?: (record: {}, index: number) => React.ReactElement<any>;

  /**
   * 额外渲染行的缩进
   */
  expandedRowIndent?: Array<any>;

  /**
   * 默认情况下展开的额外渲染行, 传入此属性为受控状态
   */
  expandedRowKeys?: Array<any>;

  /**
   * 是否显示点击展开额外渲染行的+号按钮
   */
  hasExpandedRowCtrl?: boolean;

  /**
   * 设置额外渲染行的属性
   */
  getExpandedColProps?: () => void;

  /**
   * 在额外渲染行展开或者收齐的时候触发的事件
   */
  onExpandedChange?: (
    expandedRowKeys: Array<any>,
    currentRowKey: string,
    expanded: boolean,
    currentRecord: {}
  ) => void;

  /**
   * 点击额外渲染行触发的事件
   */
  onExpandedRowClick?: (record: {}, index: number, e: any) => void;

  /**
   * 在tree模式下的缩进尺寸， 仅在isTree为true时候有效
   */
  indentSize?: number;

  /**
   * 默认情况下展开的树形表格，传入了此属性代表tree的展开为受控操作
   */
  openRowKeys?: Array<any>;

  /**
   * 点击tree展开或者关闭的时候触发的事件
   */
  onRowOpen?: (
    openRowKeys: Array<any>,
    currentRowKey: string,
    opened: boolean,
    currentRecord: {}
  ) => void;

  /**
   * 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table
   */
  isTree?: boolean;

  /**
   * 是否开启性能优化，开启了性能优化后，会自动加入`shouldComponentUpdate`
   */
  optimization?: boolean;

  /**
   * 自定义国际化文案对象
   */
  locale?: {
    empty: string;
    ok: string;
    reset: string;
  };

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

export default class Table extends React.Component<TableProps, any> {
  static ColumnGroup: typeof ColumnGroup;
  static Column: typeof Column;
  static GroupHeader: typeof GroupHeader;
}