// Type definitions for agate/LabeledIconButton

import { LabeledIconBaseProps as ui_LabeledIcon_LabeledIconBaseProps } from "@enact/ui/LabeledIcon";
import * as React from "react";
import { ButtonDecoratorProps as ui_Button_ButtonDecoratorProps } from "@enact/ui/Button";
import { LabeledIconDecoratorProps as ui_LabeledIcon_LabeledIconDecoratorProps } from "@enact/ui/LabeledIcon";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { TooltipDecoratorProps as agate_TooltipDecorator_TooltipDecoratorProps } from "@enact/agate/TooltipDecorator";

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 LabeledIconButtonBaseProps
  extends ui_LabeledIcon_LabeledIconBaseProps {
  /**
 * 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:
 * *  `labeledIconButton`  - The root component class
 * *  `icon`  - The icon component class
 * *  `label`  - The label component class
 * *  `selected`  - Applied to a  `selected`  button
 * *  `small`  - Applied to a LabeledIconButton specifying a  `size`  of  `'small'`
 */
  css?: object;
  /**
 * Provides a way to call special interface attention to this button. It will be "featured"
in some way by the theme's visual rules.  This property only has an effect when
 `backgroundOpacity`  is "opaque".
 */
  highlighted?: boolean;
  /**
   * The icon displayed within the button.
   */
  icon?: string;
  /**
 * The component used to render the  `icon` .
 * 
 * This will receive the  `icon`  prop as  `children`  and should handle it appropriately.It
will also receive the  `flip`  and  `size`  props as set on the component.
 */
  iconComponent?: React.ComponentType;
  /**
 * Selects the component.
 * 
 * Setting  `selected`  may be useful when the component represents a toggleable option. The
visual effect may be customized using the
 css   prop.
 */
  selected?: any;
  /**
   * The amount of sprite "cells" in the src image.
   */
  spriteCount?: number;
}
/**
 * An icon button component with a label.
 */

export class LabeledIconButtonBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LabeledIconButtonBaseProps>
> {}

export interface LabeledIconButtonDecoratorProps
  extends Merge<
    Merge<
      Merge<
        Merge<
          ui_Button_ButtonDecoratorProps,
          ui_LabeledIcon_LabeledIconDecoratorProps
        >,
        spotlight_Spottable_SpottableProps
      >,
      agate_Skinnable_SkinnableProps
    >,
    agate_TooltipDecorator_TooltipDecoratorProps
  > {}
export function LabeledIconButtonDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & LabeledIconButtonDecoratorProps>;

export interface LabeledIconButtonProps
  extends Merge<LabeledIconButtonBaseProps, LabeledIconButtonDecoratorProps> {}
/**
 * An Agate-styled icon button component with a label.
 * 
 * Usage:
 * ```
<LabeledIconButton icon="star" labelPosition="after">
  Favorite
</LabeledIconButton>
```
 */

export class LabeledIconButton extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LabeledIconButtonProps>
> {}

export default LabeledIconButton;
