import { ReactNode, ReactEventHandler } from 'react'

export interface RangeSliderRenderProp extends Function {
  (props: RangeSliderProps, state?: RangeSliderState): ReactNode
}

export interface RangeSliderAttributeProps {
  max: number
  min: number
  step: number
  selectedValue: number
  stepValue: number
  initialMaxValue: number
}
export interface RangeSliderProps {
  className?: string
  children?: ReactNode
  dataQa?: string
  state?: RangeSliderState
  minValue: number
  maxValue: number
  stepValue: number
  //
  renderRangeValues: RangeSliderRenderProp
  renderSliderInput?: RangeSliderRenderProp
  renderBox?: RangeSliderRenderProp
  renderWrapper?: RangeSliderRenderProp
  renderOption?: RangeSliderRenderProp
  //
  onMinChange?: Partial<RangeSliderState>
  onMaxChange?: Partial<RangeSliderState>
}

export interface RangeSliderState {
  minValue?: number
  maxValue?: number
  selectedValue?: number
  stepValue?: number
  initialMaxValue?: number
  minValueView: ReactEventHandler<HTMLButtonElement>
  maxValueView: ReactEventHandler<HTMLButtonElement>
  optionList?(maxValue: number): Array<Object>
  selectedValueView(props: RangeSliderProps, event: Event, value: number): void
}