// Type definitions for agate/Item

import { ItemBaseProps as ui_Item_ItemBaseProps } from "@enact/ui/Item";
import * as React from "react";
import { ItemDecoratorProps as ui_Item_ItemDecoratorProps } from "@enact/ui/Item";
import { MarqueeControllerProps as agate_Marquee_MarqueeControllerProps } from "@enact/agate/Marquee";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";

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 ItemBaseProps extends ui_Item_ItemBaseProps {
  /**
   * Centers the slots and content.
   */
  centered?: boolean;
  /**
   * Called with a reference to the root component.
   */
  componentRef?: Function | object;
  /**
 * 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:
 * 
 * `item`  - The root class name
 `slotBefore`  - The slot (container) preceding the text of this component
 `slotAfter`  - The slot (container) following the text of this component
 `selected`  - Applied to a  `selected`  button
 */
  css?: object;
  /**
   * Applies a disabled style and the control becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * Applies inline styling to the item.
   */
  inline?: boolean;
  /**
   * The label to be displayed along with the text.
   */
  label?: React.ReactNode;
  /**
   * The position of the label relative to the primary content,  `children` .
   */
  labelPosition?: "above" | "after" | "before" | "below";
  /**
   * Determines what triggers the marquee to start its animation.
   */
  marqueeOn?: "focus" | "hover" | "render";
  /**
   * The size of the item.
   */
  size?: "small" | "large";
  /**
 * Nodes to be inserted after  `children` .
 * 
 * For LTR locales, the nodes are inserted to the right of the primary content. For RTL
locales, the nodes are inserted to the left. If nothing is specified, nothing, not even
an empty container, is rendered in this place.
 */
  slotAfter?: React.ReactNode;
  /**
 * Nodes to be inserted before  `children`  and  `label` .
 * 
 * For LTR locales, the nodes are inserted to the left of the primary content. For RTL
locales, the nodes are inserted to the right. If nothing is specified, nothing, not even
an empty container, is rendered in this place.
 */
  slotBefore?: React.ReactNode;
}
/**
 * Renders an Agate-styled Item without any behavior.
 */

export class ItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ItemBaseProps>
> {}

export interface ItemDecoratorProps
  extends Merge<
    Merge<
      Merge<
        Merge<ui_Item_ItemDecoratorProps, agate_Marquee_MarqueeControllerProps>,
        ui_Slottable_SlottableProps
      >,
      agate_Skinnable_SkinnableProps
    >,
    spotlight_Spottable_SpottableProps
  > {}
export function ItemDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ItemDecoratorProps>;

export interface ItemProps extends Merge<ItemBaseProps, ItemDecoratorProps> {}
/**
 * An item component with Agate behaviors applied.
 * 
 * Usage:
 * ```
<Item>Item Content</Item>
```
 */

export class Item extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ItemProps>
> {}

export default Item;
