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

@observer
export class IncrementerBox extends React.Component<IncrementerBoxProps> {
  render() {
    const { state, onValueChange } = this.props

    const decrement = (event: ClickEvent) =>
      state.decrementCount({ event, onValueChange })
    const increment = (event: ClickEvent) =>
      state.incrementCount({ event, onValueChange })
    const handleChange = (event: InputChangeEvent) =>
      state.handleChange({ event, onValueChange })

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