import * as React from 'react';

interface DataPoint {
  value: number;
  label: string;
  color: string;
  tooltipContent: React.ReactElement;
}

interface ScalePoint {
  value: number;
  label: string;
}

export interface RadarChartProps {
  /** Applies a data-hook HTML attribute that can be used in tests */
  dataHook?: string;
  /** Defines data points that construct spider web-like charts. Available properties for array items:<br />
   &emsp;- `value` - a number that represents value in chart<br />
   &emsp;- `label` - a label that represents value description around the chart<br />
   &emsp;- `color` - data point color.<br />
   &emsp;- `tooltipContent` - data point tooltip content */
  data?: DataPoint[];
  /** Defines a number of scale circles in the chart. Available properties for each scale:<br />
   &emsp;- `value` - a number representing scale<br />
   &emsp;- `suffix` - a string that represents value meaning (i.e. % or $) */
  scale?: ScalePoint[];
  /** Specifies whether graph is disabled */
  disabled?: boolean;
  /** Controls the width of a graph. Minimum width is 150 pixels.
   * @default 150
   */
  width?: number;
  /** Controls label distance from a chart
   * @default 50
   */
  labelDistance?: number;
  /** Controls label width in pixels
   * @default 100
   */
  labelWidth?: number;
  /** Defines the index of a data point in hover state */
  hoverIndex?: null | number;
  /** Defines a callback function which is called every time user hovers over a data point. Includes all data point data as first argument and index as second. */
  onDataPointHover?(): void;
}

export default class RadarChart extends React.PureComponent<RadarChartProps> {}