import * as React from 'react';

export type TimeTableInsertPosition = 'start' | 'end' | 'any';

export interface TimeTableItemProps {
  disabled: boolean;
  draggable: boolean;
}

export interface TimeTableContentRenderFunctionData {
  Item: React.FC<TimeTableItemProps>;
  disabled: boolean;
  draggable: boolean;
}

export type TimeTableContentRenderFunction = (
  data: TimeTableContentRenderFunctionData,
) => React.ReactNode;

export interface TimeTableItem {
  content: React.ReactNode | TimeTableContentRenderFunction;
  disabled?: boolean;
  draggable?: boolean;
}

export interface TimeTableColumn {
  title: string;
  subtitle: string;
  disabled?: boolean;
  droppable?: boolean;
  active?: boolean;
  actions?: {
    prefixIcon?: React.ReactNode;
    label: string;
    onClick(e: Event, item: TimeTableColumn, index: number): void;
  }[];
  items: TimeTableItem[];
}

export interface TimeTableChangeDetails {
  addedToColumnIndex: number;
  removedFromColumnIndex: number;
  addedItemIndex: number;
  removedItemIndex: number;
}

export interface TimeTableProps {
  /** Hook for testing purposes. */
  dataHook?: string;
  /**
   * Position where dragged items will be inserted. Using `any` value will
   * allow the items to be re-ordered within the same column.
   * @default 'any'
   */
  insertPosition?: TimeTableInsertPosition;
  /** Title of add button. */
  addItemButtonLabel?: React.ReactNode;
  /**
   * Column data configuration. Item content is provided as a simple node or a
   * render function with `content` property. When render function is used the
   * signature is:
   * `({ Item, draggable, disabled }) => {}`:
   * - `Item` - component used to provide default item visual representation.
   * You should render `<Item draggable={draggable} disabled={disabled}>...</Item>`
   * - `draggable` - item is draggable.
   * - `disabled` - item is disabled.
   */
  columns?: TimeTableColumn[];
  /** Custom table height.
   * @default '283px'
   */
  height?: string | number;
  /**
   * Event triggered on add button click: `onAdd(columnIndex)`.
   * When not provided the button will be hidden.
   */
  onAdd?(columnIndex: number): void;
  /**
   * Event triggered on column data change:
   * `onChange(columns, { addedToColumnIndex, removedFromColumnIndex, addedItemIndex, removedItemIndex })`
   */
  onChange?(columns: TimeTableColumn[], details: TimeTableChangeDetails): void;
}

export default class TimeTable extends React.PureComponent<TimeTableProps> {}