import * as React from 'react'
import { observerWithObservableProps } from '@skava/state'
import { omit } from '@skava/utils'
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) {
    const state = initIncrementerState()
    state.update(props)
    return state
  } else {
    return props.state
  }
}

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

    renderBox: defaultRenderBox,
    renderWrapper: defaultRenderWrapper,
  }

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

  updateState = (value: IncrementerProps) => {
    this.observableState.update(value)
  }

  observableState: DefaultIncrementerState = toIncrementerState(this.props)

  render() {
    const {
      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