import React from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { RangeSliderProps, RangeSliderState } from './typings'
import { RangeSliderStateInstance } from './state'
import {
  defaultRangeValues,
  defaultSliderInput,
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

function toRangeSliderState(props: RangeSliderProps) {
  if (props.state === undefined) {
    return new RangeSliderStateInstance(props)
  } else {
    return props.state
  }
}

@observer
class RangeSlider extends React.Component<RangeSliderProps, RangeSliderState> {
  static defaultProps = {
    className: '',
    minValue: 0,
    maxValue: 5000,
    stepValue: 1000,
    selectedValue: 0,

    // render Props
    renderRangeValues: defaultRangeValues,
    renderSliderInput: defaultSliderInput,
    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
    // event
    onMinChange: NO_OP,
    onMaxChange: NO_OP,
  }

  observableState: RangeSliderState = toRangeSliderState(this.props)

  render() {
    const { renderWrapper, renderBox, ...remainingProps } = this.props
    const children = renderBox(remainingProps, this.observableState)
    return renderWrapper({ children, ...remainingProps }, this.observableState)
  }
}

export { RangeSlider, toRangeSliderState }
export default RangeSlider