// Type definitions for agate/Keypad

import * as React from "react";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

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 KeyProps {
  /**
   * The icon displayed on the key.
   */
  icon?: string;
  /**
   * Text displayed below the number/icon/symbol on the key.
   */
  label?: string;
  /**
   * Called when this button is clicked. Includes the 'key' key in its event payload to let the clicker know what was clicked inside their callback.
   */
  onKeyButtonClick?: Function;
  /**
   * Text displayed in the center of the key.
   */
  text?: string;
}
/**
 * Renders an Agate-styled Key button.
 */

export class Key extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KeyProps>
> {}

export interface KeypadBaseProps extends KeyProps {
  /**
   * Applies a disabled style and the control becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * Called when a button is clicked. Includes the 'key' key in its event payload, updates the state and the input value accordingly.
   */
  onKeyButtonClick?: Function;
}
/**
 * The basic Layout of a Keypad component.
 */

export class KeypadBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KeypadBaseProps>
> {}

export interface KeypadDecoratorProps extends agate_Skinnable_SkinnableProps {}
export function KeypadDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & KeypadDecoratorProps>;

export interface KeypadProps
  extends Merge<KeypadBaseProps, KeypadDecoratorProps> {}
/**
 * Provides Agate-themed keypad components and behaviors. Used to display a sequence of numbers and buttons, like a keyboard.
 */

export class Keypad extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KeypadProps>
> {}

export default Keypad;
