// Type definitions for sandstone/ImageItem

import { MarqueeControllerProps as sandstone_Marquee_MarqueeControllerProps } from "@enact/sandstone/Marquee";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SkinnableProps as sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/Skinnable";
import { ImageItemProps as ui_ImageItem_ImageItemProps } from "@enact/ui/ImageItem";
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 ImageItemBaseProps extends ui_ImageItem_ImageItemProps {
  /**
   * Centers the primary caption and label in vertical orientation.
   */
  centered?: boolean;
  /**
   * The primary caption displayed with the image.
   */
  children?: string;
  /**
 * 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:
 * *  `caption`  - The caption component class
 * *  `fullImage`  - Applied when  `orientation`  prop is  `vertical`  without  `label`  and  `children`
 * *  `horizontal`  - Applied when  `orientation`  prop is  `horizontal`
 * *  `image`  - The image component class
 * *  `imageIcon`  - The image icon component class
 * *  `imageItem`  - The image item component class
 * *  `label`  - The secondary caption component class
 * *  `selected`  - Applied when  `selected`  prop is  `true`
 * *  `selectionIcon`  - The icon component class for default selection component
 * *  `vertical`  - Applied when  `orientation`  prop is  `vertical`
 */
  css?: object;
  /**
   * The voice control intent.
   */
  "data-webos-voice-intent"?: string;
  /**
   * Disable ImageItem and becomes non-interactive.
   */
  disabled?: boolean;
  /**
   * A secondary caption displayed with the image.
   */
  label?: string;
  /**
   * The layout orientation of the component.
   */
  orientation?: "horizontal" | "vertical";
  /**
 * Placeholder image used while   
is loaded.
 */
  placeholder?: string;
  /**
 * Applies a selected visual effect to the image, but only if  `showSelection` 
is also  `true` .
 */
  selected?: boolean;
  /**
 * The custom selection component to render. A component can be a stateless functional
component,  `kind()`  or React component. The following is an example with custom selection
kind.
 * 
 * Usage:
 * ```
const SelectionComponent = kind({
	render: () => <div>custom selection component</div>
});

<ImageItem selectionComponent={SelectionComponent} />
```
 */
  selectionComponent?: Function;
  /**
   * Shows a selection component with a centered icon. When  `selected`  is true, a check mark is shown.
   */
  showSelection?: boolean;
  /**
 * Source for the image.
String value or Object of values used to determine which image will appear on
a specific screenSize.
 */
  src?: string | object;
}
/**
 * A Sandstone styled base component for   .
 */

export class ImageItemBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageItemBaseProps>
> {}

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

export interface ImageItemProps
  extends Merge<ImageItemBaseProps, ImageItemDecoratorProps> {}
/**
 * A sandstone-styled image item, Marquee and Spottable applied.
 * 
 * Usage:
 * ```
<ImageItem
  src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
  label="A secondary caption"
>
	The primary caption for the image
</ImageItem>
```
 */

export class ImageItem extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ImageItemProps>
> {}

export default ImageItem;