import * as React from 'react';

export interface BarChartItem {
  value: number;
  label?: React.ReactNode;
  labelShort?: React.ReactNode;
  description?: React.ReactNode;
  descriptionInfo?: React.ReactNode;
  /** Callback called every time when descriptionInfo tooltip is shown*/
  onDescriptionInfoShown?: () => void;
}

export interface BarChartProps {
  /**
   * Array of items
   *  * `value` - This prop is used for sorting bars. Displayed as big text on a bar, when there is no caption prop.
   *  * `label` -  Displayed as big text on a bar.
   *  * `labelShort` - Is shown instead of a `label` when there is not enough space.
   *  * `description` - short label under the bar.
   *  * `descriptionInfo` - long description.
   */
  items: BarChartItem[];
  /** Used to calculate space for bars inside a widget. Should be specified if the actual total is different from the sum of values of all items */
  total?: number;
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook?: string;
  /** Callback called every time when descriptionInfo tooltip is shown*/
  onDescriptionInfoShown?: () => void;
}

export interface BarChartState {
  width: number;
}

export default class BarChart extends React.Component<
  BarChartProps,
  BarChartState
> {}