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> {
  render() {
    const {
      state,
      onIncrementClick,
      onDecrementClick,
    } = this.props

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