import React from 'react'
import { toNumber } from 'exotic'
import { PaginationState } from './typings'
import { action, observable, decorate } from 'xmobx/mobx'

export class CountState implements PaginationState {
  @observable count: number
  // no need for the word left
  @observable shouldDisableRightIcon: boolean = false
  @observable shouldDisableLeftIcon: boolean = false

  @action.bound
  incrementCount(limit: number) {
    this.count = toNumber(this.count)
    if (this.count < limit) {
      this.count += 1
      this.enableIcon('left')
    }
    if (this.count === limit) {
      this.disableIcon('right')
    }
  }

  @action.bound
  decrementCount() {
    this.count = toNumber(this.count)
    if (this.count > 1) {
      this.count -= 1
      this.enableIcon('right')
    }
    if (this.count === 1) {
      this.disableIcon('left')
    }
  }

  @action
  setCount(value: number) {
    this.count = value
  }

  @action
  disableIcon(direction?: string) {
    switch (true) {
      case direction === 'right':
        this.shouldDisableRightIcon = true
        break
      case direction === 'left':
        this.shouldDisableLeftIcon = true
        break
      default:
        this.shouldDisableRightIcon = true
        this.shouldDisableLeftIcon = true
    }
  }

  @action
  enableIcon(direction?: string) {
    switch (true) {
      case direction === 'right':
        this.shouldDisableRightIcon = false
        break
      case direction === 'left':
        this.shouldDisableLeftIcon = false
        break
      default:
        this.shouldDisableRightIcon = false
        this.shouldDisableLeftIcon = false
    }
  }
}