// Type definitions for sandstone/KeyGuide

import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import * as React from "react";

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 KeyGuideBaseProps {
  /**
 * The items to be displayed in the  `KeyGuide`  when  `open` .
 * 
 * Takes an array of objects. The properties will be passed onto an  `Item`  component.
The object requires  `children` , and a unique  `key`  property. If the  `icon`  property is one
of  `'red'` ,  `'green'` ,  `'yellow'`  or ' `blue'` , a corresponding color bar is shown.
 */
  children?: {
    children: string | React.ComponentType;
    key: number | string;
    icon: string | object | "red" | "green" | "yellow" | "blue";
    [propName: string]: any;
  }[];
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `keyGuide`  - The root component class
 */
  css?: object;
  /**
   * Controls the visibility of the KeyGuide.
   */
  open?: boolean;
}
/**
 * A Key Guide component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within   .
 */

export class KeyGuideBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KeyGuideBaseProps>
> {}

export interface KeyGuideDecoratorProps
  extends Merge<
    sandstone_Marquee_MarqueeControllerProps,
    sandstone_Skinnable_SkinnableProps
  > {}
export function KeyGuideDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & KeyGuideDecoratorProps>;

export interface KeyGuideProps
  extends Merge<KeyGuideBaseProps, KeyGuideDecoratorProps> {}
/**
 * A Key Guide component, ready to use in Sandstone applications.
 * 
 * `KeyGuide' may be used to display list of text with icons to describe key behavior.
 * 
 * Usage:
 * ```
<KeyGuide
	open
>
	{[
	{icon: 'star', children: 'start label', key: 1},
	{icon: 'plus', children: 'plus label', key: 2},
	{icon: 'minus', children: 'minus label', key: 3}
]}
</KeyGuide>
```
 */

export class KeyGuide extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, KeyGuideProps>
> {}

export default KeyGuide;