import { observable, action, computed } from 'mobx'
import { isObject } from 'exotic'
import { toValidPosition } from './deps'
import { MediaCarouselState } from './typings'

export class MediaCarouselContainer implements MediaCarouselState {
  @observable
  list: number[] = [1, 2, 3, 4]
  @observable
  position: number = 0
  @observable
  pick: number = 0
  @observable
  positionStep: number = 0

  @computed
  get count() {
    return this.list.length
  }

  @computed
  get value() {
    return this.list.length > this.pick ? this.list[this.pick] : undefined
  }

  @computed
  get lastValue() {
    return this.list.length > this.last ? this.list[this.last] : undefined
  }

  @action
  setList(list: number[]) {
    this.list = list
  }

  @action
  setPosition(position: number) {
    this.position = parseInt(position)
  }

  @action.bound
  setPick(pick: number) {
    this.pick = parseInt(pick)
  }

  @action.bound
  handleBullet(event: Event) {
    const position = isObject(event.target)
      ? event.target.getAttribute('data')
      : 0
    const type = isObject(event.target)
      ? event.target.getAttribute('type')
      : 'bannerWithThumbnail'
    const getPosition = toValidPosition(position, this.count)
    if (type === 'banner') {
      this.setPick(getPosition)
    }
    this.setPosition(getPosition)
  }

  @action.bound
  forwards() {
    const forward = toValidPosition(
      this.position + this.positionStep,
      this.count
    )
    this.setPosition(forward)
  }

  @action.bound
  backwards() {
    const backward = toValidPosition(
      this.position - this.positionStep,
      this.count
    )
    this.setPosition(backward)
  }

  @action.bound
  pickPrevious() {
    const previous = toValidPosition(this.pick - 1, this.count)
    this.setPick(previous)
    this.setPosition(previous)
  }

  @action.bound
  pickNext() {
    const next = toValidPosition(this.pick + 1, this.count)
    this.setPick(next)
    this.setPosition(next)
  }
}