import { ReactNode, ReactEventHandler } from 'react'

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

// @todo @sadiq - This typing is not required, remove it when tyou change the styles
export interface RangeSliderAttributeProps {
  max: number
  min: number
  step: number
  selectedValue: number
  stepValue: number
  initialMaxValue: number
}

export interface RangeSliderCommonProps {
  maxValue?: number
  minWidth?: number
  maxWidth?: number
  selectedMinValue: number
  selectedMaxValue: number
  selectedValue?: number
  stepValue?: number
}

export interface RangeSliderProps extends RangeSliderCommonProps {
  className?: string
  children?: ReactNode
  dataQa?: string
  state?: RangeSliderState
  //
  currencyType: string
  currencyOrder: string
  color?: string
  //
  renderRangeValues: RangeSliderRenderProp
  renderSliderInput?: RangeSliderRenderProp
  renderBox?: RangeSliderRenderProp
  renderWrapper?: RangeSliderRenderProp
  renderOption?: RangeSliderRenderProp
  //
  onMinChange?: ReactEventHandler<HTMLButtonElement>
  onMaxChange?: ReactEventHandler<HTMLButtonElement>
}

export interface RangeSliderState extends RangeSliderCommonProps {
  initialMaxValue?: number
  minValue?: number
  setSelectedMin(targetValue: number): void
  setSelectedMax(targetValue: number): void
  optionList?(maxValue: number): Array<Object>
  setSelectedValue(): void
}