import * as React from 'react';
import { TableListItemProps, DragHandleSizes } from '../TableListItem';
import { indentSizes } from './constants';

export type Action = {
  label: string;
  onClick(e: Event, item?: NestableListItem): void;
  prefixIcon?: React.ReactNode;
};

export type NestableListItem = {
  id: string | number;
  actionsDataHook?: string;
  draggable?: boolean;
  hideDragHandle?: boolean;
  isCollapsed?: boolean;
  /** Adds a button to create a new item (to the Root or a child to the existing item). */
  addItemLabel?: string;
  actions?: Action[];
  children?: NestableListItem[];
} & TableListItemProps;

export type NestableListIndentSize = (typeof indentSizes)[number];

export interface NestableListProps {
  /** Can be applied in the tests as a data-hook HTML attribute. */
  dataHook?: string;
  /** Adds a bottom border (divider) to the last item. */
  withBottomBorder?: boolean;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Prevents the list from being reordered by removing the dragging grip icons. */
  readOnly?: boolean;
  actions?: Action[];
  /**
   * Defines each Nestable List item individually, using the following props:
   * * __id__ - specifies an item’s ID.
   * * __addItemLabel__ - creates the “Add new ...” button with a given label at the bottom of the item.
   * * __isCollapsed__ - bool prop, defines whether to render the item’s children.
   * * __children__ - defines an item’s children.
   * * __draggable__ - bool prop, turns on / off dragging ability for an item.
   * * __hideDragHandle__ - bool prop, turns on / off drag handle for an item.
   * * All <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-lists-table--tablelistitem" target="_blank">`<TableListItem/>`</a> props can be used to format item’s style and content.
   */
  items: NestableListItem[];
  /** Allows dragging and dropping an item only on its own depth (inside the same level).
   * @default false
   */
  preventChangeDepth?: boolean;
  /** Allows dragging and dropping an item only on its own parent.
   * @default false
   */
  preventChangeParent?: boolean;
  /** Shows the drag handle only on hover.
   * @default false
   */
  showDragHandleOnHover?: boolean;
  /** Size of the drag handle
   * @default 'large'
   */
  dragHandleSize?: DragHandleSizes;
  /** Allows dragging and dropping an item only on its pin section.
   * @default false
   */
  enforcePinnedOrder?: boolean;
  /** Defines a maximum depth (number of levels) for the list.
   * @default 10
   */
  maxDepth?: number;
  /** Adds a button to create a new item (to the Root or a child to the existing item). */
  addItemLabel?: string;
  /** Triggers function when the item’s order or nesting position is changed. */
  onChange?(data: { items: NestableListItem[]; item: NestableListItem }): void;
  /** Triggers function when the "Add new ..." button is clicked. */
  onAddItem?(item: NestableListItem): void;
  /** Defines the zIndex of the draggable layer */
  zIndex?: number;
  /** Sets the divider visibility */
  dividers?: boolean;
  /** Sets the indent size */
  indentSize?: NestableListIndentSize;
  /** Displays hierarchyIndicator from the parent to children
   * @default true
   */
  hierarchyIndicator?: boolean;
  /** Triggers function when the drag of item starts. */
  onDragStart?: () => void;
  /** Triggers function when the drag of item ends. */
  onDragEnd?: () => void;
}

export default class NestableList extends React.PureComponent<NestableListProps> {}
