import * as React from 'react';
import { PopoverNextProps } from '../PopoverNext';
import { InputProps } from '../Input';

export type ColorInputProps = Omit<InputProps, 'onChange'> & {
  /** Defines input value
   * @default ''
   */
  value: string;
  /** Defines placeholder text to display on an empty input
   * @default ''
   */
  placeholder?: string;
  /** Specifies whether the input should be disabled */
  disabled?: boolean;
  /** Specifies the status of a field */
  status?: InputProps['status'];
  /** Defines the message to display on status icon hover. If not given or empty, there will be no tooltip. */
  statusMessage?: InputProps['statusMessage'];
  /** Controls input size
   * @default 'medium'
   */
  size?: ColorInputSize;
  popoverPlacement?: PopoverNextProps['placement'];
  popoverAppendTo?: 'window' | 'scrollParent' | 'viewport' | 'parent';
  /** Returns confirmed value */
  onConfirm?: (color: string | object) => void;
  /** Returns last confirmed value from `value` prop */
  onCancel?: (color: string | object) => void;
  /** Returns changed value of input or color picker */
  onChange?: (color: string | object) => void;
  /** Defines child items to render inside of a component. Accepts any kind of content. It receives the `changeColor` function to control <ColorInput/> value. */
  colorPickerChildren?: React.ReactNode;
  /** Defines a callback handler with color HEX string. Handler is called whenever the `Add Color` button is pressed. */
  onAddColor?: (color: string | object) => void;
  /** Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed. */
  addTooltipContent?: React.ReactNode;
  /** Allows to pass popover props. See <PopoverNext/> API for a full list. */
  popoverProps?: Omit<
    PopoverNextProps,
    | 'showArrow'
    | 'fixed'
    | 'dataHook'
    | 'open'
    | 'shown'
    | 'placement'
    | 'appendTo'
    | 'onClickOutside'
    | 'onOpenChange'
    | 'children'
  >;
};

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

export default class ColorInput extends React.Component<ColorInputProps> {}
