import { VNode } from 'vue';
import { ElementUIComponent } from './component'

export interface SliderTooltipFormat {
  /**
   * Format the displayed value of Slider
   *
   * @param value Value of the Slider
   * @returns formatted value
   */
  (value: number): string
}

export interface SliderTransition {
  duration: number
  mode?: string
  delay?: number
}

/** Slider Component */
export declare class ElSlider extends ElementUIComponent {
  /** Current value of the slider */
  value: number | number[]

  /** Minimum value */
  min: number

  /** Maximum value */
  max: number

  /** Whether Slider is disabled */
  disabled: boolean

  /** Step size */
  step: number

  /** Whether to display an input box, works when range is false */
  showInput: boolean

  /** Format of displayed tooltip value */
  formatTooltip: SliderTooltipFormat

  /** Whether to display control buttons when show-input is true */
  showInputControls: boolean

  /** Size of the input box */
  inputSize: string

  /** Whether to display breakpoints */
  showStops: boolean

  /** Whether to display tooltip value */
  showTooltip: boolean

  /** Whether to select a range */
  range: boolean

  /** Vertical mode */
  vertical: boolean

  /** Slider height, required in vertical mode */
  height: boolean

  /** Debounce delay when typing, in milliseconds, works when show-input is true */
  debounce: number

  /** Custom class name for the tooltip */
  tooltipClass: string
  
  placement: string

  /** Custom marks */
  marks: {
    [key: number]: string | { style: object; label: string | VNode }
  }

  /** Wheather to enable smooth tranistion when the value change */ 
  enableTransition: boolean

  /** custom transition option, works when enableTransition is true */
  transition: SliderTransition
}