import { observable, action } from 'xmobx/mobx'
import { GalleryProps, DefaultGalleryState, GalleryEventHandlerArgs } from './typings'

class GalleryState implements DefaultGalleryState {
  @observable startSlideIndex: number = 0
  @observable totalSlidesCount: number = 0
  @observable currentSlideIndex: number = this.startSlideIndex

  @action.bound
  onChange(args: GalleryEventHandlerArgs) {
    // to each slide change we need trigger this one
  }

  @action.bound
  handlePrevClick(args: GalleryEventHandlerArgs) {
    if (this.currentSlideIndex > 0 && this.currentSlideIndex < this.totalSlidesCount) {
      this.currentSlideIndex -= 1
    }
    // this.onChange(props)
  }

  @action.bound
  handleNextClick(args: GalleryEventHandlerArgs) {
    if (this.currentSlideIndex < this.totalSlidesCount) {
      this.currentSlideIndex += 1
    }
    // this.onChange(props)
  }

  @action.bound
  handleBulletClick(args: GalleryEventHandlerArgs) {
    /**
     * @todo need to get the bullet index
     */
    // this.currentSlideIndex = bullet_idx
    // this.onChange(props)
  }
}

export { GalleryState }
export default GalleryState