import * as React from 'react';
import {
  DataTableColumn,
  DataTableProps,
  DataTableResizeProps,
  RowDataDefaultType,
  DragStartEvent,
  DragEndEvent,
} from './DataTable';
import { EmptyState } from '../EmptyState';
import { TableRowStylesheet } from './DataTable/components/rowStylesheets';

export {
  TableRowStylesheet,
  TableRowStylesheetStateMap,
  TableRowStylesheetStateValue,
  TableRowStylesheetStFunction,
} from './DataTable/components/rowStylesheets';

export interface TableProps<
  RowData = RowDataDefaultType,
> extends UsedDataTableProps<RowData> {
  /** Applies a data-hook HTML attribute to be used in the tests. */
  dataHook?: string;
  /** Defines a callback function which is called when selection happens. <br />
   * There are 3 types of selections:
   *    * `ALL` - bulk selection checkbox has been triggered to select all items
   *    * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object also includes an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item.
   *    * `NONE` - bulk selection has been triggered to unselect all items.
   *  */
  onSelectionChanged?: OnSelectionChangedFn;
  /** Called when item selection triggered but not changed yet. */
  onSelectionStarted?(): void;
  /** Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array.
   * @default false
   */
  showSelection?: boolean;
  /** When true and showSelection is enabled, displays row numbers in the selection column.
   * The checkbox appears on hover or when the row is selected.
   * @default false
   */
  showRowNumbers?: boolean;
  /** Hides bulk selection checkbox in the table titlebar.
   * @default false
   */
  hideBulkSelectionCheckbox?: boolean;
  /** A ref to the bulk selection checkbox in the table titlebar. */
  bulkSelectionCheckboxRef?: React.Ref<HTMLInputElement>;
  /** Defines an array of selected rows. */
  selectedIds?: string[] | number[];
  /** Specifies whether table row selection is restricted at a given moment. Can be defined as:
   *    * `bool` disables selection for all table rows
   *    * `function` that is called for each row to check whether to disable selection or not depending on specified condition */
  selectionDisabled?: boolean | SelectionDisabledFn<RowData>;
  /** Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, the first click deselects all items instead.
   * @default false
   */
  deselectRowsByDefault?: boolean;
  /**
   *  When false then Table would not create a `<div/>` wrapper around it's children.
   *  Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it doesn't render anything to the DOM by itself.
   * @default true
   */
  withWrapper?: boolean;
  /** Specifies whether infinite scroll paging is controlled by the consumer. When `true`, the table renders all of `data` and calls `loadMore` whenever it needs more rows, instead of first revealing the rows already in `data` `itemsPerPage` at a time. Used only when `infiniteScroll` is `true`. */
  controlled?: boolean;
  /** Sets the scrollable element that `<TableFloatingScrollBar/>` sticks to. Used only when `horizontalScroll` is `true`. Inside a `<Page/>`, the page's scroll container is used instead. */
  viewportRef?: React.RefObject<HTMLElement | null | undefined>;
  /**
   * Defines a callback function which is called on column title click.
   */
  onSortClick?(colData: TableColumn, colNum: number): void;
  /** Specifies the total number of selectable items in the table (including items not loaded yet).
   * When 'Select all' is triggered in infinite scroll tables, newly loaded items are selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones.
   * SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. */
  totalSelectableCount?: number;
  /** Configures table columns. Required properties for each column:<br />
   *    * `title`: specifies a text string or an element to display in the table titlebar
   *    * `render`: defines a function which is called to display this row value for this column<br>
   *
   *  Optional properties for each column:
   *    * `onCellClick`: defines a  callback function which is called each time a cell in this column is clicked. Signature: `onCellClick(column, rowData, rowNum, event)`
   *    * `sortable`: specifies whether field is sortable. If true, clicking the header calls `onSortClick`.
   *    * `sortDescending`: specifies what sort icon to display in the column header. `true` shows an up arrow, `false` shows a down arrow, `undefined' shows no icon.
   *    * `infoTooltipProps`: controls info [tooltip](/?path=/story/components-overlays--tooltip) appearance in titlebar. Note: `dataHook`, `moveBy` and `children` won't be passed to tooltip.
   *    * `style`: applies a custom CSS class to the component's root element
   *    * `align`: controls the alignment of the column content
   *    * `width`: sets the width of a column. No value means the column tries to contain its children, if possible.
   *    * `important`: increases text size of this column data across all rows, sets font color to D10
   *    * `stickyActionCell`: specifies whether `<TableActionCell/>` controls are fixed to the right side of the table
   *    * `resizeProps`: configures column resize behavior. When provided with an `id`, enables resizing for this column. Use `disabled: true` to show a disabled handle, or `disabled: true, hideDisabledResizeHandle: true` to hide the handle completely.
   *    */
  columns: TableColumn<RowData>[];
  /** Enables reordering rows by drag and drop. Pass `TableDragAndDrop` from `@wix/wix-style-react-incubator/drag-and-drop`, which supplies the droppable table context and the drag handle column. */
  dragAndDrop?: any;
  onDragEnd?(event: DragEndEvent): unknown;
  onDragStart?(event: DragStartEvent): unknown;
  onDragCancel?(event: DragEndEvent): unknown;
  /** Disables dragging rows and hides the drag handle column. Used only when `dragAndDrop` is set. */
  isDragAndDropDisabled?: boolean;
  /** When provided, renders a fixed-width status slot per row to the right of the selection/row-number control.
   * The callback returns a `{ status, messages }` config for rows that need a status indicator,
   * or `null`/`undefined` for an empty but width-reserved slot — the slot never collapses.
   *
   * Only `error` and `warning` statuses are supported; the slot is exclusively for those two
   * indicator kinds, rendered via the WDS `<StatusIndicator/>`. */
  rowStatus?: (
    row: RowData,
    rowNum: number,
  ) => TableRowStatusValue | null | undefined;
  /** Accept any wrapper component as a child element. It must eventually include <Table.Content/>. */
  children?: React.ReactNode;
}

export interface SelectionContext {
  isSelected(id: string): boolean;
  selectedCount: number;
  getSelectedIds(): string[];
  getNotSelectedIds(): string[];
  infiniteBulkSelected: boolean;
  bulkSelectionState: 'ALL' | 'NONE' | 'SOME';
  toggleSelectionById(): void;
  /** Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, the first click deselects all items instead.
   * @default false
   */
  deselectRowsByDefault: boolean;
  toggleAll(deselectRowsByDefault?: boolean): void;
  selectAll(): void;
  deselectAll(): void;
  setSelectedIds(ids: string[]): void;
  /** Specifies whether table row selection is restricted at a given moment. Can be defined as:
   *    * `bool` disables selection for all table rows
   *    * `function` that is called for each row to check whether to disable selection or not depending on specified condition */
  selectionDisabled: boolean | (() => boolean);
}

declare const ToolbarContainer: React.FC<{
  /** Accept any wrapper component as a child element. It must eventually include <Table.Content/>. */
  children: (selectionContext: SelectionContext) => React.ReactNode;
}>;
declare const SubToolbar: React.FunctionComponent<
  React.PropsWithChildren<{ dataHook?: string }>
>;
declare const Titlebar: React.FC<{ dataHook?: string }>;
declare const Content: React.FC<{
  titleBarVisible?: boolean;
  titleBarDisplay?: boolean;
  /** Applies a data-hook HTML attribute to be used in the tests. */
  dataHook?: string;
}>;
declare const BulkSelectionCheckbox: React.FC<
  React.PropsWithChildren<{ dataHook: string }>
>;

/** Return value shape for the `<Table rowStatus={...}>` callback.
 *  Table renders a standard `<StatusIndicator/>` from this config.
 *  Return `null` (or `undefined`) for rows with no status. */
export type TableRowStatusValue = {
  /** Status indicator type.
   * @default 'error'
   */
  status?: 'error' | 'warning';
  /** Tooltip messages shown when hovering the icon. Each string renders on its own line
   *  (e.g. one entry per erroring column: `["SKU: SKU is required", "Price: Must be positive"]`).
   *  Empty array or omitted → no tooltip. */
  messages?: string[];
};

export type TableColumn<RowDataType = RowDataDefaultType> =
  DataTableColumn<RowDataType>;

export type OnSelectionChangedFn = (
  /** Defines an array of selected rows. */
  selectedIds: TableProps['selectedIds'] | null,
  change:
    | {
        type: 'SINGLE_TOGGLE';
        /** Assigns an unique identifier for the table. */
        id: string;
        value: boolean;
        origin: string;
      }
    | {
        type: 'ALL' | 'NONE';
        origin: string;
      },
) => void;

export type SelectionDisabledFn<RowData = RowDataDefaultType> = (
  rowData: RowData,
) => void;

export type UsedDataTableProps<RowData = RowDataDefaultType> = Pick<
  DataTableProps<RowData>,
  | 'allowMultiDetailsExpansion'
  | 'dynamicRowClass'
  | 'isRowHighlight'
  | 'isRowActive'
  | 'hasMore'
  | 'initialLoad'
  | 'id'
  | 'infiniteScroll'
  | 'itemsPerPage'
  | 'loader'
  | 'loadMore'
  | 'onRowClick'
  | 'onMouseEnterRow'
  | 'onMouseLeaveRow'
  | 'useWindow'
  | 'scrollElement'
  | 'rowVerticalPadding'
  | 'rowDetails'
  | 'removeRowDetailsPadding'
  | 'rowDataHook'
  | 'rowClass'
  | 'headerRowClass'
  | 'headerClass'
  | 'showHeaderWhenEmpty'
  | 'showLastRowDivider'
  | 'virtualized'
  | 'virtualizedTableHeight'
  | 'virtualizedLineHeight'
  | 'virtualizedListRef'
  | 'width'
  | 'skin'
  | 'data'
  | 'horizontalScroll'
  | 'stickyColumns'
  | 'isRowDisabled'
  | 'infiniteScrollRef'
  | 'isApplyColumnWidthStyle'
  | 'resizable'
  | 'resizeProps'
>;

export class Table<RowData = RowDataDefaultType> extends React.Component<
  TableProps<RowData>
> {
  static ToolbarContainer: typeof ToolbarContainer;
  static Titlebar: typeof Titlebar;
  static SubToolbar: typeof SubToolbar;
  static Content: typeof Content;
  static EmptyState: typeof EmptyState;
  static BulkSelectionCheckbox: typeof BulkSelectionCheckbox;
  static dataTableRowVirtualStyle?: TableRowStylesheet;
  static dataTableRowStyle: TableRowStylesheet;

  /** Sets the selected rows by their ids. Works only when `showSelection` is `true`. */
  setSelectedIds: (selectedIds: TableProps['selectedIds']) => void;
}

export {};