// Type definitions for agate/ArcSlider

import * as React from "react";
import { TouchableProps as ui_Touchable_TouchableProps } from "@enact/ui/Touchable";
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 ArcSliderBehaviorDecoratorProps {
  /**
   * Whether or not the component is in a disabled state.
   */
  disabled?: boolean;
  /**
   * The end angle(in degrees) of the arc slider.
   *
   * The value should be between 0 and 360 and should be greater than startAngle.
   */
  endAngle?: number;
  /**
   * The maximum value of the slider and should be greater than min.
   */
  max?: number;
  /**
   * The minimum value of the slider.
   */
  min?: number;
  /**
   * Called when value is changed.
   */
  onChange?: Function;
  /**
   * The radius of the arc circle.
   */
  radius?: number;
  /**
   * The start angle(in degrees) of the arc slider.
   *
   * The value should be between 0 and 360.
   */
  startAngle?: number;
  /**
   * The amount to increment or decrement the value.
   */
  step?: number;
  /**
   * The stroke width of the arc slider.
   */
  strokeWidth?: number;
  /**
   * The value of the slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
}
export function ArcSliderBehaviorDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ArcSliderBehaviorDecoratorProps>;

export interface ArcSliderBaseProps {
  /**
 * Overrides the  `aria-valuetext`  for the ArcSlider. By default,  `aria-valuetext`  is set
to the current value.
 */
  "aria-valuetext"?: string | number;
  /**
   * The color of the background arc.
   */
  backgroundColor?: string;
  /**
   * Function that generates a reference to the arc svg.
   */
  componentRef?: object | Function;
  /**
   * Whether or not the component is in a disabled state.
   */
  disabled?: boolean;
  /**
   * The end angle(in degrees) of the arc slider.
   *
   * The value should be between 0 and 360 and should be greater than startAngle.
   */
  endAngle?: number;
  /**
   * The color of the foreground arc.
   */
  foregroundColor?: string;
  /**
   * The maximum value of the slider and should be greater than min.
   */
  max?: number;
  /**
   * The minimum value of the slider.
   */
  min?: number;
  /**
   * The radius of the arc circle.
   */
  radius?: number;
  /**
   * Nodes to be inserted in the center of the ArcSlider.
   */
  slotCenter?: React.ReactNode;
  /**
   * The start angle(in degrees) of the arc slider.
   *
   * The value should be between 0 and 360.
   */
  startAngle?: number;
  /**
   * The amount to increment or decrement the value.
   */
  step?: number;
  /**
   * The stroke width of the arc slider.
   */
  strokeWidth?: number;
  /**
   * The value of the slider.
   *
   * Defaults to the value of  `min` .
   */
  value?: number;
}
/**
 * An arc slider component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within  ArcSlider  .
 */

export class ArcSliderBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ArcSliderBaseProps>
> {}

export interface ArcSliderDecoratorProps
  extends Merge<
    Merge<ArcSliderBehaviorDecoratorProps, ui_Touchable_TouchableProps>,
    agate_Skinnable_SkinnableProps
  > {}
export function ArcSliderDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ArcSliderDecoratorProps>;

export interface ArcSliderProps
  extends Merge<ArcSliderBaseProps, ArcSliderDecoratorProps> {}
/**
 * An arc slider component, ready to use in Agate applications.
 * 
 * Usage:
 * ```
<ArcSlider backgroundColor="blue" endAngle={200} foregroundColor="red" radius={150} startAngle={0} step={2} />
```
 */

export class ArcSlider extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ArcSliderProps>
> {}

export default ArcSlider;
