// フラグ
let flagList = [
  {id: 1, flag: false},
  {id: 2, flag: false},
  {id: 3, flag: false}
]

// import interact from 'interactjs'
class Interact {
  constructor(){
    this.applyInteractJs();
  }

  //interact.jsを適用
  applyInteractJs(){
    this.createPositionStorage();
    this.addDraggingEvent();
  }

  //位置情報を保存する変数を作成
  createPositionStorage(){
    this.target = document.querySelectorAll('.js-draggable');
    if(!this.target){
      return;
    }
    const arr = [...this.target];
    this.editStyle = {};
    arr.forEach((el) => {
    //   this.editStyle[`target-${el.textContent}`] = {
      this.editStyle[`target-${el.dataset.dragid}`] = {
        x     : 0,
        y     : 0,
        scale : 1
      };
    });
  }

  //ドラッグイベントを適用
  addDraggingEvent(){
    if(!this.target){
      return;
    }

    interact('.js-draggable')
    //マルチタッチジェスチャーイベント
    .gesturable({
      onmove: (e) => {
        //2本指での拡大縮小に対応
        this.scaleMoveListener(e);
      }
    })
    //ドラッグ&ドロップイベント
    .draggable({
      // 慣性を付ける
      inertia     : true,
      // 親要素の領域内に要素を保持します
      modifiers   : [
      interact.modifiers.restrictRect({
        //ドラッグの範囲を親要素に設定
        // restriction : 'parent',
        //ドラッグの最後の移動値を適用させる。慣性と併用することで動きがスムーズになる
        endOnly     : true
      })
      ],
      // コンテナの端でドラッグまたはサイズ変更の移動が発生した場合、コンテナ（ウィンドウまたはHTMLElement）をスクロールします。
      autoScroll  : true,

      // dragmoveイベント
      onmove      : (e) => {
        this.dragMoveListener(e);
      },
      // dragend イベント
      onend       : (e) => {
        this.dragEndListner(e);
      }
    });
  }

  /*
  * dragmoveイベントを取得
  * @param {Object} event
  */
  dragMoveListener(event){
    event.stopPropagation();
    const target    = event.target;
    // const target_id = target.textContent;
    const target_id = target.dataset.dragid;
    const editStyle  = this.editStyle[`target-${target_id}`];
    // console.log(target_id);
    // console.log(flag);


    //位置情報を更新する
    editStyle.x = (parseFloat(editStyle.x) || 0) + event.dx;
    editStyle.y = (parseFloat(editStyle.y) || 0) + event.dy;

    // css transform で要素を動かす
    this.addEditedStyle(target, editStyle);

    //情報を表示させる
    this.showPositionInfomation(target_id, event);
  }

  /*
  * 操作した図形のスタイルを追加する
  * @param {Object} editStyle 図形の編集情報
  */
  addEditedStyle(target, editStyle){
     // css transform で要素を動かす
     target.style.webkitTransform =
     target.style.transform =
     `translate(${editStyle.x}px, ${editStyle.y}px) scale(${editStyle.scale}`;
   }

  /*
  * dragendイベントを取得
  * @param {Object} event
  */
  dragEndListner(event){
    const target_id = event.target.textContent;
    this.showPositionInfomation(target_id, event);
  }

  /*
  * 位置情報を表示させる
  * @param {String} target_id
  * @param {Object} event
  */
  showPositionInfomation(target_id, event){
    //移動距離
    const target = document.getElementById(`js-distance-${target_id}`);
    if(!target){
      return;
    }
    const moveValue = (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + Math.pow(event.pageY - event.y0, 2) | 0)).toFixed(2) + 'px';
    target.textContent = moveValue;

    //拡大縮小値
    const targetScale = document.getElementById(`js-scale-${target_id}`);
    if(!targetScale){
      return;
    }
    targetScale.textContent = event.scale ? event.scale.toFixed(2) : 1;

  }

}
new Interact();



// 当たり判定
const array = [1,2,3];
array.forEach(index => {
interact(`.dropzone-${index}`).dropzone({
    // 受け入れる要素を指定
    accept: `.draggable-wrap .draggable-${index}`,
    // 判定する要素の重なり度を指定
    overlap: 0.75,
  
    // listen for drop related events:
    // オブジェクトがアクティブになったときに実行される
    ondropactivate: function (event) {
      // add active dropzone feedback
      event.target.classList.add('drop-active')
    },
    // オブジェクトがエリア内に入ったときに実行される
    ondragenter: function (event) {
      var draggableElement = event.relatedTarget
      var dropzoneElement = event.target
  
      // feedback the possibility of a drop
      dropzoneElement.classList.add('drop-target')
      draggableElement.classList.add('can-drop')
    //   draggableElement.textContent = 'Dragged in'
    },
    // オブジェクトがエリア内から離れたときに実行される
    ondragleave: function (event) {
      // event.relatedTarget.textContent = 'Dragged out'
      // remove the drop feedback style
      event.target.classList.remove('drop-target')
      event.relatedTarget.classList.remove('can-drop')
      event.relatedTarget.classList.remove('active')
      // flag[index] = false;
    },
    // オブジェクトがエリア内に入り、ドロップされたときに実行される
    ondrop: function (event) {
      event.relatedTarget.classList.add('active')
      // event.relatedTarget.textContent = 'Dropped'
      flagList[index - 1].flag = true;
      // console.log(flagList[index - 1]);
      // console.log(flag[index]);
      flagCheck();
    },
    ondropdeactivate: function (event) {
      // remove active dropzone feedback
      event.target.classList.remove('drop-active')
      event.target.classList.remove('drop-target')
    }
  })
});

// 全てのflagがtrueになっているかをチェックする
function flagCheck() {   
    let result = flagList.every(function(element){
        return element.flag == true;
    });
    // 全てのフラグがTrueの場合
    if (result) {
      let resultText = document.getElementById('js-result-text');
      
        resultText.textContent = '３つの要素が正しくセットされました！';
        // console.log("OK");
    }else{
        // console.log("NG");
    }
}