import React from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import {
  RangeSliderProps,
  RangeSliderState,
  RangeSliderCommonProps,
} 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: '',
    maxValue: 5000,
    selectedMinValue: 0,
    selectedMaxValue: 5000,
    stepValue: 500,
    selectedValue: 0,
    currencyType: '$',
    currencyOrder: 'left',
    color: '#ff6285',
    // render Props
    renderRangeValues: defaultRangeValues,
    renderSliderInput: defaultSliderInput,
    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
    // event
    onMinChange: NO_OP,
    onMaxChange: NO_OP,
  }

  updateRange(props) {
    this.observableState.setSelectedValue()
    this.observableState.setSelectedMin(props.selectedMinValue)
    this.observableState.setSelectedMax(props.selectedMaxValue)
  }

  componentWillMount() {
    this.updateRange(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.updateRange(nextProps)
  }

  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