import * as React from 'react';

export type RichTextInputAreaStatus = 'error' | 'warning' | 'loading';

export interface RichTextInputAreaProps {
  /** data-hook for testing */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Sets the initial value to be displayed in the editor.
   * @default '<p/>'
   */
  initialValue?: string;
  /** Sets a placeholder message to display. */
  placeholder?: string;
  /** Whether this specific button is disabled (toolbar-level `disabled` also applies)
   * @default false
   */
  disabled?: boolean;
  /** Specifies the status of a field. */
  status?: RichTextInputAreaStatus;
  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage?: React.ReactNode;
  /** Defines a standard callback function for changes: `onChange(htmlText, { plainText })` */
  onChange?: (htmlText: string, params: { plainText: string }) => void;
  /** Defines a minimum height for the editor (it grows by default) */
  minHeight?: string;
  /** Defines a maximum height for the editor (it grows by default) */
  maxHeight?: string;
  /**
   * Enables browsers spell checking.
   * Do not affect IE.
   * In Safari, autocorrects by default.
   */
  spellCheck?: boolean;
  /** An array of custom toolbar button configs to append after the built-in buttons. */
  customButtons?: Array<{
    /** Tooltip tooltip text */
    tooltipText?: string;
    /** Button icon element */
    icon?: React.ReactNode;
    /** Click handler */
    onClick?: () => void;
    /** Whether this specific button is disabled (toolbar-level `disabled` also applies)
     * @default false
     */
    disabled?: boolean;
    /** Whether the button appears in an active/pressed state */
    active?: boolean;
    /** data-hook for testing */
    dataHook?: string;
  }>;
  /** Defines text styles to be shown. */
  texts?: texts;
}

export type texts = {
  toolbarButtons?: {
    boldButtonLabel?: string;
    italicButtonLabel?: string;
    underlineButtonLabel?: string;
    linkButtonLabel?: string;
    bulletedListButtonLabel?: string;
    numberedListButtonLabel?: string;
  };
  insertionForm?: {
    confirmButtonLabel?: string;
    cancelButtonLabel?: string;
    link?: {
      textInputPlaceholder?: string;
      urlInputPlaceholder?: string;
    };
  };
};

export default class RichTextInputArea extends React.PureComponent<RichTextInputAreaProps> {
  setValue: (value: string) => void;
  focus: () => void;
  blur: () => void;
}