import * as React from 'react';
import { TooltipProps } from '../Tooltip';
import { TooltipCommonProps } from '../common';

export type InputValue = string | number | undefined;
export type MinValue = number | undefined;
export type MaxValue = number | undefined;

export interface InputProps {
  children?: React.ReactNode;
  dataHook?: string;
  className?: string;
  id?: string;
  ariaControls?: string;
  ariaDescribedby?: string;
  ariaLabel?: string;
  autoFocus?: boolean;
  autoSelect?: boolean;
  autocomplete?: string;
  defaultValue?: InputValue;
  disabled?: boolean;
  status?: InputStatus;
  statusMessage?: React.ReactNode;
  hideStatusSuffix?: boolean;
  forceFocus?: boolean;
  forceHover?: boolean;
  maxLength?: number;
  menuArrow?: boolean;
  clearButton?: boolean;
  focusOnClearClick?: boolean;
  name?: string;
  border?: 'standard' | 'round' | 'bottomLine' | 'none';
  noLeftBorderRadius?: boolean;
  noRightBorderRadius?: boolean;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onClear?: React.MouseEventHandler<HTMLInputElement>;
  onCompositionChange?: (isComposing: boolean) => void;
  onEnterPressed?: React.KeyboardEventHandler<HTMLInputElement>;
  onEscapePressed?: React.KeyboardEventHandler<HTMLInputElement>;
  onFocus?: (e?: React.FocusEvent<HTMLInputElement>) => void;
  onInputClicked?: React.MouseEventHandler<HTMLInputElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
  onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
  placeholder?: string;
  prefix?: React.ReactNode;
  readOnly?: boolean;
  disableEditing?: boolean;
  rtl?: boolean;
  size?: InputSize;
  suffix?: React.ReactNode;
  tabIndex?: number;
  textOverflow?: 'clip' | 'ellipsis';
  tooltipPlacement?: TooltipProps['placement'];
  type?: string;
  value?: string | number;
  withSelection?: boolean;
  required?: boolean;
  min?: MinValue;
  max?: MaxValue;
  step?: number;
  customInput?: React.ReactNode | Function;
  pattern?: string;
  inputRef?: (input: HTMLInputElement) => void;
  inputmode?: string;
  ariaRoledescription?: string;
  clearButtonTooltipContent?: React.ReactNode;
  clearButtonTooltipProps?: TooltipCommonProps;
}

export type InputStatus =
  | InputStatusError
  | InputStatusWarning
  | InputStatusLoading;
export type InputStatusError = 'error';
export type InputStatusLoading = 'loading';
export type InputStatusWarning = 'warning';

export type InputSize = 'tiny' | 'small' | 'medium' | 'large';

declare const Ticker: React.FC<TickerProps>;
interface TickerProps {
  onUp?: React.MouseEventHandler<HTMLElement>;
  onDown?: React.MouseEventHandler<HTMLElement>;
  upDisabled?: boolean;
  downDisabled?: boolean;
  onMouseDown?: React.MouseEventHandler<HTMLElement>;
  dataHook?: string;
}

interface IconAffixProps {
  children?: React.ReactNode;
  dataHook?: string;
}
declare const IconAffix: React.FC<IconAffixProps>;

interface AffixProps {
  children?: React.ReactNode;
  value?: string;
}
declare const Affix: React.FC<AffixProps>;

interface AffixProps {
  children?: React.ReactNode;
  value?: string;
}
declare const Group: React.FC<any>;
export default class Input extends React.Component<InputProps> {
  static Ticker: typeof Ticker;
  static IconAffix: typeof IconAffix;
  static Affix: typeof Affix;
  static Group: typeof Group;
  static StatusError: InputStatusError;
  static StatusLoading: InputStatusLoading;
  static StatusWarning: InputStatusWarning;

  clear: (event?: React.ChangeEvent<HTMLInputElement>) => void;
  blur: () => void;
  focus: HTMLElement['focus'];
  select: () => void;
  setSelectionRange: (start: number, end: number) => void;
}