import React, { MutableRefObject, RefCallback } from 'react';
import { DragHandlePublicAPIProps } from '../DragHandle/DragHandle';
import { TooltipCommonProps } from '../common';

export type TableListItemColumn = {
  value: React.ReactNode;
  width?: string | number;
  align?: 'left' | 'center' | 'right';
};

export interface TableListItemProps {
  dataHook?: string;
  className?: string;
  onClick?: Function;
  options: TableListItemColumn[];
  verticalPadding?: TableListItemPadding;
  horizontalPadding?: TableListItemPadding;
  checkbox?: boolean;
  checkboxDisabled?: boolean;
  checked?: boolean;
  focused?: boolean;
  onBlur?(e: React.FocusEvent): void;
  onKeyUp?(e: KeyboardEvent): void;
  onCheckboxChange?: React.ChangeEventHandler<HTMLInputElement>;
  draggable?: boolean;
  dragging?: boolean;
  dragDisabled?: boolean;
  showDivider?: boolean;
  dragHandleProps?: Partial<DragHandlePublicAPIProps>;
  checkboxTooltipContent?: React.ReactNode;
  checkboxTooltipProps?: TooltipCommonProps;
  border?: boolean;
  dragHandleSize?: 'large' | 'small';
  expandable?: boolean;
  expandDisabled?: boolean;
  onClickExpand?: Function;
  expanded?: boolean;
}

export type TableListItemImperativeActions = {
  focus(): void;
};

export type TableListItemPadding =
  | 'xxTiny'
  | 'xTiny'
  | 'tiny'
  | 'small'
  | 'medium'
  | 'large';

declare const TableListItem: React.ForwardRefExoticComponent<
  TableListItemProps & React.RefAttributes<TableListItemImperativeActions>
>;

export default TableListItem;