import * as React from 'react';

export interface BreadcrumbsProps {
  /** Applies a data-hook HTML attribute to be used in the tests */
  dataHook?: string;
  /** Describes each breadcrumbs item:
   * - `id` (required) - gives an item numeric identifier
   * - `value` (required) - sets the item label to be shown on breadcrumbs
   * - `link` - stores a link which user is directed to after clicking on an item
   * - `customElement` - contains and renders a custom component or `<a>` link instead of an item value
   * - `disabled` - disables an item
   */
  items: BreadcrumbsItem[];
  /** Defines a function which is called when a user clicks on an item */
  onClick?: (
    item: BreadcrumbsItem,
    event: React.MouseEvent<HTMLElement>,
  ) => any;
  /** Defines which breadcrumbs item is currently active */
  activeId?: string | number;
  /** Controls the component size
   * @default 'medium'
   */
  size?: BreadcrumbsSize;
  /** Sets the maximum width of each item value in px. Longer items get truncated with ellipsis.
   * @default '240px'
   */
  itemMaxWidth?: React.CSSProperties['maxWidth'];
  /** @deprecated use `skin` instead
   * @default 'onGrayBackground'
   */
  theme?: BreadcrumbsSkin;
  /** Controls the component appearance */
  skin?: BreadcrumbsSkin;
}

export default class Breadcrumbs extends React.PureComponent<BreadcrumbsProps> {}

export type BreadcrumbsItem = {
  id: string | number;
  value: React.ReactNode;
  link?: string;
  customElement?: any;
  disabled?: boolean;
};

export type BreadcrumbsSize = 'medium' | 'large' | 'small';

export type BreadcrumbsSkin =
  | 'onWhiteBackground'
  | 'onGrayBackground'
  | 'onDarkBackground';

export type BreadcrumbsTheme = BreadcrumbsSkin;