import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { IncrementerBoxProps } from './typings'
import { StyledInput, StyledPlusButton, StyledMinusButton } from './styled'

@observer
export class IncrementerBox extends React.Component<IncrementerBoxProps> {
  handleDecrement = () => {
    const { state, onValueChange } = this.props
    state.decrementCount()
    if (isFunction(onValueChange)) {
      onValueChange(state.count)
    }
  }

  handleIncrement = () => {
    const { state, onValueChange } = this.props
    state.incrementCount()
     if (isFunction(onValueChange)) {
      onValueChange(state.count)
    }
  }

  handleChange = () => {
    const { state, onValueChange } = this.props
    state.handleChange(event)
    if (isFunction(onValueChange)) {
      onValueChange(state.count)
    }
  }
  
  render() {
    const {
      state,
    } = this.props

    return (
      <React.Fragment>
        <StyledMinusButton
          onClick={this.handleDecrement}
          isDisabled={!state.shouldDecrement}
        />
        <StyledInput
          value={state.count}
          onChange={this.handleChange}
          onBlur={state.handleBlur}
        />
        <StyledPlusButton
          onClick={this.handleIncrement}
          isDisabled={!state.shouldIncrement}
        />
      </React.Fragment>
    )
  }
}