import { observable, action } from 'mobx'
import { isArray } from 'exotic'
import { MediaCarouselStateType, MediaCarouselProps } from './typings'

class MediaCarouselState implements MediaCarouselStateType {
  @observable
  position: number = 0
  @observable
  slides: number = 0
  @observable
  count: number = 0
  @observable
  translatePercentage: number = 0
  @observable
  hasPreviousSlide: boolean = false
  @observable
  hasNextSlide: boolean = true
  @observable
  step: number = 0

  @action
  update(props: MediaCarouselProps) {
    const { list } = props
    this.count = isArray(list) && list.length
  }

  @action
  setStep(step: number) {
    this.step = step > this.count ? this.count : step
    this.slides = Math.ceil(this.count / this.step)
  }

  @action.bound
  goTo(position: number) {
    this.setPosition(position)
  }

  @action
  setPosition(currentPosition: number) {
    // bullets states will be handling based on this
    this.position = currentPosition

    // arrow states
    this.hasPreviousSlide = !(this.position === 0)
    this.hasNextSlide = !(this.position === this.slides - 1)

    // slide transition (based on the step & position)
    const remainingCount = this.count - this.position * this.step
    const remainingStep = Math.ceil(remainingCount / this.step)

    // based on the device the item width keep getting change so it is required to calculate
    const itemWidth = 100 / this.step

    // when the item count comes in odd number, the last slide should not scroll 100%, so excluding here
    let extraWidthOnLastSlide = 0
    if (remainingStep === 1) {
      extraWidthOnLastSlide = 100 - remainingCount * itemWidth
    }

    // this percentage will set it to the slide list parent
    this.translatePercentage = this.position * 100 - extraWidthOnLastSlide

    console.log('[currentPosition]', this.position)
    console.log('[step]', this.step)
    console.log('[remainingCount]', remainingCount)
    console.log('[remainingStep]', remainingStep)
    console.log('[this.translatePercentage]', this.translatePercentage)
  }

  @action.bound
  toNext() {
    if (this.hasNextSlide === true) {
      const nextPosition = this.position + 1
      this.setPosition(nextPosition)
    }
  }

  @action.bound
  toPrevious() {
    if (this.hasPreviousSlide === true) {
      const previousPosition = this.position - 1
      this.setPosition(previousPosition)
    }
  }
}

export { MediaCarouselState }
export default MediaCarouselState