export default class WsCarouselController {
  activeSlideNum = 0;
  slideIds = [];

  onSlideAdded = (slideId) => {
    this.slideIds.push(slideId);
  }

  onSlideRemoved = (slideId) => {
    const i = this.slideIds.indexOf(slideId);
    if (i !== -1) {
      if (this.isSlideActive(slideId)) {
        this.activeSlideNum = i === this.slideIds.length - 1 ?
          this.activeSlideNum - 1 :
          this.activeSlideNum;
      }

      this.slideIds.splice(i, 1);
    }
  }

  isSlideActive = slideId => this.slideIds[this.activeSlideNum] === slideId;

  getNumSlides = () => this.totalSlideCount;

  getSlideContainerDynamicStyle = () => ({
    width: `${this.slideIds.length * 100}%`,
    transform: `translate(${(-100 * this.activeSlideNum) / this.slideIds.length}%)`,
  });

  getSlideClass = (slideId) => {
    const i = this.slideIds.indexOf(slideId);
    if (i < this.activeSlideNum) {
      return 'previous-slide';
    }

    return i === this.activeSlideNum ? 'current-slide' : 'next-slide';
  }

  showNextSlide = () => {
    ++this.activeSlideNum;
    this._notifySlideActivated();
  }

  showPreviousSlide = () => {
    --this.activeSlideNum;
    this._notifySlideActivated();
  }

  setActiveSlide = (slideId) => {
    const i = this.slideIds.indexOf(slideId);
    if (i !== -1) {
      this.activeSlideNum = i;
      this._notifySlideActivated();
    }
  }

  canGoForward = () => this.activeSlideNum < this.slideIds.length - 1;
  canGoBack = () => this.activeSlideNum > 0;

  _notifySlideActivated = () => {
    if (this.onSlideActivated) {
      this.onSlideActivated({ slideIndex: this.activeSlideNum });
    }
  }
}
