// Type definitions for agate/Input

import * as React from "react";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface InputBaseProps {
  /**
   * Disables Input and makes it non-interactive.
   */
  disabled?: boolean;
  /**
   * Blurs the input when the "enter" key is pressed.
   */
  dismissOnEnter?: boolean;
  /**
   * Adds a  `focused`  class to the input decorator.
   */
  focused?: boolean;
  /**
   * The icon to be placed at the end of the input.
   */
  iconAfter?: string;
  /**
   * The icon to be placed at the beginning of the input.
   */
  iconBefore?: string;
  /**
 * Indicates  value   is invalid and shows
 invalidMessage  , if set.
 */
  invalid?: boolean;
  /**
 * The tooltip text to be displayed when the input is
 invalid  .
 * 
 * If this value is  _falsy_ , the tooltip will not be shown.
 */
  invalidMessage?: string;
  /**
   * Called before the input value is changed.
   *
   * The change can be prevented by calling  `preventDefault`  on the event.
   */
  onBeforeChange?: Function;
  /**
   * Called when blurred.
   */
  onBlur?: Function;
  /**
   * Called when the input value is changed.
   */
  onChange?: Function;
  /**
   * Called when clicked.
   */
  onClick?: Function;
  /**
   * Called when focused.
   */
  onFocus?: Function;
  /**
   * Called when a key is pressed down.
   */
  onKeyDown?: Function;
  /**
   * Text to display when  value   is not set.
   */
  placeholder?: string;
  /**
   * The size of the input field.
   */
  size?: "large" | "small";
  /**
   * The type of input.
   *
   * Accepted values correspond to the standard HTML5 input types.
   */
  type?: string;
  /**
   * The value of the input.
   */
  value?: string | number;
}
/**
 * An input component.
 */

export class InputBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, InputBaseProps>
> {}

export interface InputDecoratorProps
  extends Merge<
    ui_Changeable_ChangeableProps,
    agate_Skinnable_SkinnableProps
  > {}
export function InputDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & InputDecoratorProps>;

export interface InputProps
  extends Merge<
    Merge<
      Merge<InputBaseProps, ui_Changeable_ChangeableProps>,
      spotlight_Spottable_SpottableProps
    >,
    agate_Skinnable_SkinnableProps
  > {}
/**
 * A Spottable, Agate styled input component with embedded icon support.
 * 
 * By default,  `Input`  maintains the state of its  `value`  property. Supply the  `defaultValue` 
property to control its initial value. If you wish to directly control updates to the component,
supply a value to  `value`  at creation time and update it in response to  `onChange`  events.
 */

export class Input extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, InputProps>
> {}

export default Input;
