// Type definitions for agate/ColorPicker

import { ButtonBaseProps as agate_Button_ButtonBaseProps } from "@enact/agate/Button";
import * as React from "react";
import { ButtonDecoratorProps as agate_Button_ButtonDecoratorProps } from "@enact/agate/Button";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";

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 SwatchButtonBaseProps extends agate_Button_ButtonBaseProps {
  /**
   * The color of the swatch if the  `color`  prop is not set.
   *
   * The value should take the format of a HEX color. Ex:  `#ffcc00`  or  `#3467af`
   */
  children?: object;
  /**
   * The color of the swatch.
   *
   * The value should take the format of a HEX color. Ex:  `#ffcc00`  or  `#3467af`
   */
  color?: 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:
 * *  `swatchButton`  - The root class name
 * *  `colorSwatch`  - The node that displays the chosen color. The current value is applied
			as a background-color to this element.
 */
  css?: object;
  /**
   * Callback method with a payload containing the  `value`  that was just selected.
   */
  onClick?: Function;
}
/**
 * A swatch component which sets-up the component's structure.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within  SwatchButton  .
 */

export class SwatchButtonBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SwatchButtonBaseProps>
> {}

export interface ColorPickerBaseProps {
  /**
 * 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:
 * *  `colorPicker`  - The root class name
 * *  `palette`  - The drawer that displays all the available options for color.
 */
  css?: object;
  /**
   * The animation direction of the  `palette` .
   */
  direction?: string;
  /**
   * Disables the  `ColorPicker` .
   */
  disabled?: boolean;
  /**
   * Determines whether the extended color controls (sliders) are visible
   */
  extended?: boolean;
  /**
   * Callback method with a payload containing the  `color`  that was just selected.
   */
  onChange?: Function;
  /**
   * Callback method passed to the  SwatchButton   component with a payload containing the  `value`  that was just selected.
   */
  onClick?: Function;
  /**
   * Callback method with a payload containing the hue value of the selected  `color` .
   */
  onHueChange?: Function;
  /**
   * Callback method with a payload containing the lightness value of the selected  `color` .
   */
  onLightnessChange?: Function;
  /**
   * Callback method with a payload containing the saturation value of the selected  `color` .
   */
  onSaturationChange?: Function;
  /**
   * Callback method passed to the  Button   component as  `onTap` . This is used to toggle the visibility of the H/S/L sliders.
   */
  onToggleExtended?: Function;
  /**
   * Opens ColorPicker with the contents visible.
   */
  open?: boolean;
  /**
 * The color value. Setting this directly will not allow interaction with the
component. Use  `defaultValue`  to enable interactive use.
 * 
 * The color should take the format of a HEX color. Ex:  `#ffcc00`  or  `#3467af`
 */
  value?: string;
}
/**
 * The color picker base component which sets-up the component's structure.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within  ColorPicker  .
 */

export class ColorPickerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ColorPickerBaseProps>
> {}

export interface SwatchButtonDecoratorProps
  extends Merge<
    agate_Button_ButtonDecoratorProps,
    agate_Skinnable_SkinnableProps
  > {}
export function SwatchButtonDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & SwatchButtonDecoratorProps>;

export interface SwatchButtonProps
  extends Merge<SwatchButtonBaseProps, SwatchButtonDecoratorProps> {}
/**
 * A color picker swatch button component.
 */

export class SwatchButton extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SwatchButtonProps>
> {}

export interface ColorPickerDecoratorProps
  extends Merge<
    ui_Toggleable_ToggleableProps,
    agate_Skinnable_SkinnableProps
  > {}
export function ColorPickerDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ColorPickerDecoratorProps>;

export interface ColorPickerProps
  extends Merge<ColorPickerBaseProps, ColorPickerDecoratorProps> {}
/**
 * A color picker component, ready to use in Agate applications.
 */

export class ColorPicker extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ColorPickerProps>
> {}

export default ColorPicker;
