import * as React from 'react';
import type { ToggleButtonProps } from '../ToggleButton';

export interface ComposerSidebarItem {
  id: string | number;
  label: string;
  disabled?: boolean;
  icon?: any;
  sectionTitle?: string;
  /** Defines a default on click handler for items */
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

export interface ComposerSidebarProps {
  /** Applies a data-hook HTML attribute to be used in the tests */
  dataHook?: string;
  /** Controls the items’ label placement
   * @default 'end'
   */
  labelPlacement?: ToggleButtonProps['labelPlacement'];
  /** Controls the items’ label tooltip when labelPlacement is set to tooltip */
  labelTooltipProps?: ToggleButtonProps['tooltipProps'];
  /** Sets the size of the items
   * @default 'medium'
   */
  size?: string;
  /** Sets the width of the container */
  width?: number | string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Defines which item is currently selected
   * @default null
   */
  selectedId?: number | string;
  /** Defines an array of items (buttons and labels) to show on the sidebar:
   * - `label`: text string next to a button
   * - `icon`: icon shown in the toggle button
   * - `disabled`: disables the item
   * - `onClick`: defines what happens when the item is clicked on
   * - `sectionTitle`: defines a section under which each item is placed
   */
  items?: ComposerSidebarItem[];
  /** Defines a default on click handler for items */
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  /** Controls the ellipsis of the item label
   * @default true
   */
  ellipsis?: boolean;
}

export default class ComposerSidebar extends React.PureComponent<ComposerSidebarProps> {}