class Modal {
  constructor() {
    //初期値(DOM)
    this.DOM = {};
    this.DOM.thumbItems = document.querySelectorAll('.thumb__items li');
    this.DOM.modal = document.querySelector('.modal');
    this.DOM.modalOverlay = document.querySelector('.modal-overlay');
    this.DOM.modalItem = document.querySelector('.modal__item');
    this.DOM.modalCaption = document.querySelector('.modal__caption');
    this.DOM.modalClose = document.querySelector('.modal__close');
    this.DOM.modalPrev = document.querySelector('.modal__prev');
    this.DOM.modalNext = document.querySelector('.modal__next');

    // スワイプ座標
    this.startX;
    this.endX;
    // ターゲット要素
    this.thumbTarget;
    // 何番めの要素か
    this.thumbCurrent;

    // 最初に実行する関数
    this._init();
  }

  _init() {
    this.DOM.thumbItems.forEach((thumbItem, index, array) => {
      thumbItem.addEventListener('click', this._appearModal.bind(this, thumbItem, index));
    });

    this._clickEvent();
    this._swipeEvent();
  }
  
  // クリックイベント
  _clickEvent() {
    this.DOM.modalClose.addEventListener('click', this._disappearModal.bind(this));
    this.DOM.modalOverlay.addEventListener('click', this._disappearModal.bind(this));
    this.DOM.modalNext.addEventListener('click', this._next.bind(this));
    this.DOM.modalPrev.addEventListener('click', this._prev.bind(this));
  }
  // スワイプイベント
  _swipeEvent() {
    this.DOM.modalItem.addEventListener('touchmove', this._swipeStart.bind(this));
    this.DOM.modalItem.addEventListener('touchstart', this._swipeMove.bind(this));
    this.DOM.modalItem.addEventListener('touchend', this._swipeEnd.bind(this));
  }
  _swipeMove(event) {
    event.preventDefault();
    this.endX = event.touches[0].pageX;
  }
  _swipeStart(event) {
    event.preventDefault();
    this.startX = event.touches[0].pageX;
  }
  _swipeEnd(event) {
    event.preventDefault();
    console.log('startX:' + this.startX);
    console.log('endX:' + this.endX);
    if( 0 < (this.endX - this.startX) ) {
      this._next();
    } else {
      this._prev();
    }
  }
  // モーダル表示
  _appearModal(thumbItem, index) {
    this.thumbCurrent = index;　// 現在のindex
    this.DOM.modal.classList.add('visible');
    this.DOM.modalOverlay.classList.add('visible');

    this.thumbTarget = thumbItem; //モーダル表示する要素
    
    this._modalShow(this.thumbTarget); // モーダル表示
  }
  // モーダル非表示
  _disappearModal() {
    this.DOM.modal.classList.remove('visible');
    this.DOM.modalOverlay.classList.remove('visible');
  }
  // モーダルに表示する画像
  _modalShow(self) {
    const imgElm = self.childNodes[0];
    const targetmodalItem = this.DOM.modalItem.childNodes[0];
    targetmodalItem.classList.add('fadein');
    targetmodalItem.src = imgElm.src;
    // フェードインのクラス
    setTimeout(function() {
      targetmodalItem.classList.add('fadeout');
      targetmodalItem.classList.remove('fadein');
      targetmodalItem.classList.remove('fadeout');
    },300);

    this._modalCaption(imgElm);
  }
  // モーダルに表示するキャプション
  _modalCaption(imgElm) {
    this.DOM.modalCaption.innerText = imgElm.dataset.caption
  }
  _next() {
    this.thumbCurrent = this._changeCount(1, this.thumbCurrent, this.DOM.thumbItems.length);
    this.thumbTarget = this.DOM.thumbItems[this.thumbCurrent];
    this._modalShow(this.thumbTarget);　// モーダル表示
  }
  _prev() {
    this.thumbCurrent = this._changeCount(-1, this.thumbCurrent, this.DOM.thumbItems.length);
    this.thumbTarget = this.DOM.thumbItems[this.thumbCurrent];

    this._modalShow(this.thumbTarget);　// モーダル表示
  }

  // 変更する番号を取得
  _changeCount(num, index, len) {
    return (index + num + len) % len;
  }
}

// インスタンス化
const modal = new Modal();