import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { omit } from '@skava/modules/___dist/utils/omit'
import { NO_OP } from 'exotic'
import { IncrementerProps, DefaultIncrementerState } from './typings'
import { IncrementerState } from './state'
import {
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

function initIncrementerState() {
  return new IncrementerState()
}

function toIncrementerState(props: IncrementerProps) {
  if (props.state === undefined) {
    return initIncrementerState()
  } else {
    return props.state
  }
}

@observer
class Incrementer extends React.Component<
IncrementerProps,
DefaultIncrementerState
> {
  static defaultProps = {
    className: '',
    step: 1,
    minValue: 1,
    maxValue: 99,
    defaultValue: 2,
    onChange: NO_OP,

    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
  }

  componentWillMount() {
    this.observableState.count = this.props.defaultValue
  }

  observableState: DefaultIncrementerState = toIncrementerState(this.props)

  render() {
    const {
      className,
      renderBox,
      renderWrapper,

      ...remainingProps
    } = this.props

    const requiredProps = omit(remainingProps, ['nowrap'])
    const children = renderBox(requiredProps, this.observableState)

    const view = renderWrapper({ children, ...remainingProps })
    return view
  }
}

export { Incrementer }
export default Incrementer