import { observable, action } from 'xmobx/mobx'
import { toNumber } from 'exotic'
import { IncrementerProps, DefaultIncrementerState } from './typings'

class IncrementerState implements DefaultIncrementerState {
  @observable count: number
  @observable shouldIncrement: boolean = true
  @observable shouldDecrement: boolean = false

  @action.bound
  incrementCount(props: IncrementerProps) {
    const { maxValue, step } = props

    if (this.count < maxValue) {
      this.count += step
      this.shouldDecrement = true
    }
    if (this.count === maxValue) {
      this.shouldIncrement = false
    }
  }

  @action.bound
  handleChange(props: IncrementerProps, event: Event) {
    const { minValue, maxValue } = props
    let value = event.target.value
    value = value === '' ? '' : toNumber(value)
    if (value === '' || (value >= minValue && value <= maxValue)) {
      this.count = value
    }
    if (value === 0) {
      this.count = 1
    }
    this.shouldDecrement = !(this.count <= minValue)
    this.shouldIncrement = !(this.count >= maxValue)
  }

  @action.bound
  handleBlur(props: IncrementerProps, event: Event) {
    let value = event.target.value
    if (value === '' || value <= props.minValue) {
      value = props.minValue
      this.count = value
    } else if (value >= props.maxValue) {
      value = props.maxValue
      this.count = value
    }
  }

  @action.bound
  decrementCount(props: IncrementerProps) {
    const { minValue, step } = props

    if (this.count > minValue) {
      this.count -= step
      this.shouldIncrement = true
    }

    if (this.count === minValue) {
      this.shouldDecrement = false
    }
  }
}

export { IncrementerState }