// @flow
import type { TranslatedContent } from '../../../types';
import type { SpaceProps } from '../../../mixins/spacing';
import type { StackeeProps } from '../../../mixins/stackee';
import type { StylableProps } from '../../../mixins/themes';
import type { TestingProps } from '../../../mixins/testing';
import type { FocusEvents } from '../../../mixins/focus';
import type { AriaProps } from '../../../mixins/aria';

type BaseRangeProps = {|
  ...TestingProps,
  ...StylableProps,
  ...SpaceProps,
  ...StackeeProps,
  ...FocusEvents,
  ...AriaProps,
  value: number,
  /** Minimum value allowed to slide to */
  min: number,
  /** Maximum value allowed to slide to */
  max: number,
  /** Label underneath the min value */
  minLabel?: TranslatedContent,
  /** Label underneath the max value */
  maxLabel?: TranslatedContent,
  onRangeChange: (number) => void,
  /** Current value label. Use this when sliders are represented by text  */
  ariaValuetext?: string,
|};

type InternalLabelProps = {|
  /** Used to give context to what the slider is changing */
  label: TranslatedContent,
  /** Show or hide the field label. Defaults to false */
  hideLabel?: boolean,
|};

type ExternalLabelProps = {|
  /** Use when the label is external to the component */
  ariaLabelledBy: string,
|};

export type RangeWithInternalLabelProps = {|
  ...BaseRangeProps,
  ...InternalLabelProps,
|};

type RangeWithExternalLabelProps = {|
  ...BaseRangeProps,
  ...ExternalLabelProps,
|};

export type RangeProps =
  | RangeWithInternalLabelProps
  | RangeWithExternalLabelProps;
