const inputWrap = document.querySelector('#input_wrap');
const clearBtn = document.querySelector('#clear_btn');

window.addEventListener('DOMContentLoaded', function(){
  // input要素を作成する
  InputFactory(60, 4, inputWrap);
});

// input要素を作成
function InputFactory(row, col, parentNode) {
  for (let i = 0; i < row; i++) {
    const createDiv = document.createElement('div');
    for (let j = 0; j < col; j++) {
      const createInput = document.createElement('input');
      createInput.type = 'text';
      createInput.name = `input${i}-${j}`;
      createDiv.appendChild(createInput);
      const pastInput = new PastInput(createInput);
    }
    parentNode.appendChild(createDiv);
  }
}

// ペーストした時の処理
class PastInput {
  constructor(target) {
    this.target = target;
    this.event();
  }
  event() {
    this._getInputRowCol();
  }
  // ペーストした時のInputの位置(rowとcol)を取得
  _getInputRowCol() {
    const target = this.target;
    // ペーストイベント
    target.addEventListener('paste', (e) => {
      // ターゲット要素（input）
      const targetInput = e.target;
      // 全てのDIV要素取得
      const divAll = inputWrap.querySelectorAll('div');
      console.log(divAll)
      // 全てのInput要素取得
      const inputAll = inputWrap.querySelectorAll('input');
      // ターゲットの親要素（DIV）取得
      const targetDiv = targetInput.parentNode;

      // 全てのDiv要素取得をArrayに変換
      const divAllAry = Array.from(divAll);
      // 全てのInput要素取得をArrayに変換
      const inputAllAry = Array.from(inputAll);

      // ターゲット要素のrowとcolインデックスを取得
      const rowIndex = divAllAry.indexOf(targetDiv);
      const colIndex =
        inputAllAry.indexOf(targetInput) % targetDiv.children.length;

      // ペーストした値をInput要素に反映
      this._textPaste(rowIndex, colIndex);
      console.log(rowIndex, colIndex)
    });
  }
  _textPaste(row, col) {
    //　ペーストしたInput要素を取得
    const target = this.target;

    setTimeout(() => {
      //　ペーストしたInput要素のテキスト取得
      const pasteText = target.value;
      //　ペーストしたInput要素のテキストを配列に変換
      const pasteAry = pasteText.split(' ');

      //　テキストをそれぞれのInput要素に分割して反映
      pasteAry.forEach((pastItem, index) => {

        const currentDiv = inputWrap.children[row + index];
        console.log(inputWrap.children)
        const resultItem = pastItem.split(/\t/);

        // Input要素があればテキストを反映
        if (currentDiv !== undefined) {
          for (let i = 0; i < resultItem.length; i++) {
            const currentInput = currentDiv.children[col + i];
            if (currentInput !== undefined) {
              currentInput.value = resultItem[i];
              // 背景色追加のCSS追加
              currentInput.classList.add('starting-point');
               // 背景色追加のCSS削除
              setTimeout(() => {
                currentInput.classList.remove('starting-point');
              }, 500);
            }
          }
        }
      });
    });
  }
}

// データを全てクリアする
clearBtn.addEventListener('click', (e) => {
  const inputAll = inputWrap.querySelectorAll('input');
  // 全てのInput要素をArrayに変換
  const inputAllAry = Array.from(inputAll);
  for (let i = 0; i < inputAllAry.length; i++) {
    const targetInput = inputAllAry[i];
    targetInput.value = '';
  }
});