import React from 'react';
import { PopoverCommonProps } from '../common';
import { InfoIconProps } from '../InfoIcon';

export type TableListHeaderColumn = {
  value?: React.ReactNode;
  width?: string | number;
  align?: 'left' | 'center' | 'right';
  sortable?: boolean;
  sortDescending?: boolean;
  infoTooltipProps?: InfoIconProps;
};

export interface TableListHeaderProps {
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /**
   * `width` supports px/%/fr
   * `sortable`: Sets whether this field is sortable. If `true` clicking the header will call `onSortChange`
   * `sortDescending`: Sets what sort icon to display in the column header. `true` will show an up arrow, `false` will show a down arrow, `undefined' will show no icon
   * `infoTooltipProps`: Props object for column header's [tooltip](/?path=/story/components-api-components--tooltip). Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
   */
  options?: TableListHeaderColumn[];
  /**
   * State of Checkbox rendered at first column. 'hidden' to not render it
   */
  checkboxState?:
    | 'normal'
    | 'checked'
    | 'indeterminate'
    | 'hasError'
    | 'disabled'
    | 'hidden';
  /**
   * Called when checkbox is clicked
   */
  onCheckboxChange?: () => void;
  /**
   * A callback function called on each column title click. Signature `onSortChange(colNum, nativeEvent)`
   */
  onSortChange?(
    colNum: number,
    nativeEvent: React.MouseEvent<HTMLDivElement>,
  ): void;
}

declare const TableListHeader: React.ForwardRefExoticComponent<TableListHeaderProps>;

export default TableListHeader;
