// Type definitions for agate/CheckboxItem

import { ItemProps as agate_Item_ItemProps } from "@enact/agate/Item";
import * as React from "react";
import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";

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 CheckboxItemBaseProps
  extends Omit<agate_Item_ItemProps, "iconComponent"> {
  /**
 * 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:
 * *  `checkboxItem`  - The root class name
 */
  css?: object;
  /**
   * The icon content.
   *
   * May be specified as either:
   * *  A string that represents an icon from the  iconList  ,
   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
   * *  A URL specifying path to an icon image, or
   * *  An object representing a resolution independent resource (See   )
   */
  icon?: string | object;
  /**
 * Enables the "indeterminate" state.
 * 
 * An indeterminate, mixed, or half-selected state is typically used in a hierarchy or group
to represent that some, not all, children are selected.
 * 
 * NOTE: This does not prevent updating the  `selected`  state. Applications must control this
property directly.
 */
  indeterminate?: boolean;
  /**
   * The icon to be used in the  `indeterminate`  state.
   *
   * May be specified as either:
   * *  A string that represents an icon from the  iconList  ,
   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
   * *  A URL specifying path to an icon image, or
   * *  An object representing a resolution independent resource (See   )
   */
  indeterminateIcon?: string;
  /**
   * If true the checkbox will be selected.
   */
  selected?: boolean;
  /**
   * Nodes to be inserted after the checkbox and before  `children` .
   */
  slotBefore?: React.ReactNode;
}
/**
 * An item with a checkbox component, ready to use in Agate applications.
 * 
 * `CheckboxItem`  may be used to allow the user to select a single option or used as part of a
 Group   when multiple  selections   are possible.
 * 
 * Usage:
 * ```
<CheckboxItem
  defaultSelected={selected}
  onToggle={handleToggle}
>
  Item with a Checkbox
</CheckboxItem>
```
 */

export class CheckboxItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CheckboxItemBaseProps>
> {}

export interface CheckboxItemDecoratorProps
  extends Merge<ui_Toggleable_ToggleableProps, ui_Slottable_SlottableProps> {}
export function CheckboxItemDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & CheckboxItemDecoratorProps>;

export interface CheckboxItemProps
  extends Merge<CheckboxItemBaseProps, CheckboxItemDecoratorProps> {}
/**
 * An Agate-styled item with a checkbox component.
 * 
 * `CheckboxItem`  will manage its  `selected`  state via  Toggleable   unless set
directly.
 */

export class CheckboxItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CheckboxItemProps>
> {}

export default CheckboxItem;
