import * as React from 'react';
import * as color from 'color';

type ColorInstance = ReturnType<(typeof color)['rgb']>;

export interface ColorPickerProps {
  /** Defines child items to be rendered above action buttons. Accepts any kind of content. */
  children?: React.ReactNode;
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Defines current color. It can be provided in `string` or `object` format [https://github.com/Qix-/color](https://github.com/Qix-/color) */
  value: string | ColorInstance;
  /** Specifies whether current and previously used colors should be displayed
   * @default false
   */
  showHistory?: boolean;
  /** Specifies whether `HEX`/`RGB`/`HSB` converter tabs be displayed
   * @default true
   */
  showConverter?: boolean;
  /** Specifies whether color input in HEX mode should be displayed. This is relevant only if `showConverter` is `false`
   * @default true
   */
  showInput?: boolean;
  /** Specifies whether action buttons (confirm/cancel) should be displayed
   * @default true
   */
  showActionButtons?: boolean;
  /** Defines an event handler for color change. */
  onChange?: (color: string | ColorInstance) => void;
  /** Defines an event handler for cancel button click. */
  onCancel?: (color: string | ColorInstance) => void;
  /** Defines an event handler for confirm button click. */
  onConfirm?: (color: string | ColorInstance) => void;
  /** Defines an event handler for color add button click. If not passed, the plus icon will not be visible. */
  onAdd?: (color: string | ColorInstance) => void;
  /** Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed. */
  addTooltipContent?: React.ReactNode;
  /** Allows to submit when color is not selected. Returns a color object with alpha equal to 0.
   * @default false
   */
  allowEmpty?: boolean;
  /** Defines a placeholder text to show in an input when `allowEmpty` is true */
  emptyPlaceholder?: string;
  /** Specifies whether eye dropper tool should be displayed
   * @default false
   */
  showEyeDropper?: boolean;
  /** Defines the label for the eye dropper button
   * @default 'Sample color'
   */
  eyeDropperLabel?: string;
  /** Specifies whether component padding should be removed
   * @default false
   */
  removePadding?: boolean;
}

export default class ColorPicker extends React.Component<ColorPickerProps> {
  /** Sets focus on the first interactive element inside ColorPicker */
  focus(): void;
}
