// Type definitions for agate/IncrementSlider

import { SliderBaseProps as agate_Slider_SliderBaseProps } from "@enact/agate/Slider";
import * as React from "react";
import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
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 IncrementSliderBaseProps extends agate_Slider_SliderBaseProps {
  /**
   * Sets the knob to selected state and allows it to move via 5-way controls.
   */
  active?: boolean;
  /**
 * Prevents read out of both the slider and the increment and decrement
buttons.
 */
  "aria-hidden"?: boolean;
  /**
 * 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;
  /**
   * Background progress, as a proportion between  `0`  and  `1` .
   */
  backgroundProgress?: number;
  /**
   * Sets the hint string read when focusing the decrement button.
   */
  decrementAriaLabel?: string;
  /**
 * Assign a custom icon for the decrementer. All strings supported by  Icon   are
supported. Without a custom icon, the default is used, and is automatically changed when
 vertical   is changed.
 */
  decrementIcon?: string;
  /**
   * Disables the slider and prevents events from firing.
   */
  disabled?: boolean;
  /**
   * Indicates focused state.
   */
  focused?: boolean;
  /**
   * Sets the hint string read when focusing the increment button.
   */
  incrementAriaLabel?: string;
  /**
 * Assign a custom icon for the incrementer. All strings supported by  Icon   are
supported. Without a custom icon, the default is used, and is automatically changed when
 vertical   is changed.
 */
  incrementIcon?: string;
  /**
   * 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 increment slider.
   */
  max?: number;
  /**
   * The minimum value of the increment slider.
   */
  min?: number;
  /**
   * Hides the slider bar fill and prevents highlight when spotted.
   */
  noFill?: boolean;
  /**
   * Called when the knob is activated or deactivated by selecting it via 5-way.
   */
  onActivate?: Function;
  /**
   * Called when the value is changed.
   */
  onChange?: Function;
  /**
   * Called when the component is removed while retaining focus.
   */
  onSpotlightDisappear?: Function;
  /**
   * Called prior to focus leaving the component when the 5-way down key is pressed.
   */
  onSpotlightDown?: Function;
  /**
   * Called prior to focus leaving the component when the 5-way left key is pressed.
   */
  onSpotlightLeft?: Function;
  /**
   * Called prior to focus leaving the component when the 5-way right key is pressed.
   */
  onSpotlightRight?: Function;
  /**
   * Called prior to focus leaving the component when the 5-way up key is pressed.
   */
  onSpotlightUp?: Function;
  /**
 * Sets the orientation of the slider, whether the slider moves left and right or up and
down. Must be either  `'horizontal'`  or  `'vertical'` .
 */
  orientation?: string;
  /**
 * 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 size of the incrementSlider.
   */
  size?: "small" | "large";
  /**
   * Disables spotlight navigation into the component.
   */
  spotlightDisabled?: boolean;
  /**
   * The amount to increment or decrement the value.
   */
  step?: number;
  /**
   * The value of the increment slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
}
/**
 * A stateless Slider with IconButtons to increment and decrement the value. In most circumstances,
you will want to use the stateful version:   .
 */

export class IncrementSliderBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IncrementSliderBaseProps>
> {}

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

export interface IncrementSliderProps
  extends Merge<IncrementSliderBaseProps, IncrementSliderDecoratorProps> {}
/**
 * An IncrementSlider with Agate styling and SliderDecorator applied with IconButtons to
increment and decrement the value.
 * 
 * By default,  `IncrementSlider`  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 IncrementSlider extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, IncrementSliderProps>
> {}

export default IncrementSlider;
