// Type definitions for agate/Slider

import { SliderBaseProps as ui_Slider_SliderBaseProps } from "@enact/ui/Slider";
import * as React from "react";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

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 SliderBaseProps
  extends Merge<ui_Slider_SliderBaseProps, SliderDecoratorProps> {
  /**
 * Activates the component when focused so that it may be manipulated via the directional
input keys.
 */
  activateOnFocus?: boolean;
  /**
   * Sets the knob to selected state and allows it to move via 5-way controls.
   */
  active?: boolean;
  /**
 * 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:
 * *  `slider`  - The root component class
 */
  css?: object;
  /**
   * Disables component and does not generate events.
   */
  disabled?: boolean;
  /**
   * Indicates that the slider has gained focus.
   */
  focused?: boolean;
  /**
   * The amount to increment or decrement the position of the knob via 5-way controls.
   *
   * If not specified,  `step`  is used for the default value.
   */
  knobStep?: number;
  /**
   * The maximum value of the slider.
   */
  max?: number;
  /**
   * The minimum value of the slider.
   */
  min?: number;
  /**
   * Called when the knob is activated or deactivated by selecting it via 5-way
   */
  onActivate?: Function;
  /**
 * Called when a key is pressed down while the slider is focused.
 * 
 * When a directional key is pressed down and the knob is active (either by first
pressing enter or when  `activateOnFocus`  is enabled), the Slider will increment or
decrement the current value and emit an  `onChange`  event. This default behavior can be
prevented by calling  `preventDefault()`  on the event passed to this callback.
 */
  onKeyDown?: Function;
  /**
 * Called when a key is released while the slider is focused.
 * 
 * When the enter key is released and  `activateOnFocus`  is not enabled, the slider will be
activated to enable incrementing or decrementing the value via directional keys. This
default behavior can be prevented by calling  `preventDefault()`  on the event passed to
this callback.
 */
  onKeyUp?: Function;
  /**
 * Sets the point, as a proportion between 0 and 1, from which the slider is filled.
 * 
 * Applies to both the slider's  `value`  and  `backgroundProgress` . In both cases,
setting the value of  `progressAnchor`  will cause the slider to fill from that point
down, when  `value`  or  `backgroundProgress`  is proportionally less than the anchor, or up,
when  `value`  or  `backgroundProgress`  is proportionally greater than the anchor, rather
than always from the start of the slider.
 */
  progressAnchor?: number;
  /**
   * The amount to increment or decrement the value.
   */
  step?: number;
  /**
   * The value of the slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
}
/**
 * Range-selection input component.
 */

export class SliderBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SliderBaseProps>
> {}

export interface SliderDecoratorProps
  extends Merge<
    Merge<
      Merge<ui_Changeable_ChangeableProps, spotlight_Spottable_SpottableProps>,
      ui_Slottable_SlottableProps
    >,
    agate_Skinnable_SkinnableProps
  > {}
export function SliderDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & SliderDecoratorProps>;

export interface SliderProps extends SliderDecoratorProps {
  /**
 * Overrides the  `aria-valuetext`  for the slider.
 * 
 * By default,  `aria-valuetext`  is set to the current value. This should only be used when
the parent controls the value of the slider directly through the props.
 */
  "aria-valuetext"?: string | number;
}
/**
 * Slider input with Agate styling,  `Spottable`  ,
 Touchable   and  `SliderDecorator`  
applied.
 * 
 * By default,  `Slider`  maintains the state of its  `value`  property. Supply the  `defaultValue` 
property to control its initial value. If you wish to directly control updates to the
component, supply a value to  `value`  at creation time and update it in response to  `onChange` 
events.
 */

export class Slider extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, SliderProps>
> {}

export default Slider;
