/*DOM要素を取得*/
let drag_and_drop_area = document.querySelector("#drag-and-drop-area");
let progress_status = document.querySelector("#progress");


const readFile = async (blob, progress_status) => {
  const rf = new FileReader();
  rf.readAsDataURL(blob);

  return new Promise((resolve, reject) => {
    rf.onloadstart = () => {
      progress_status.textContent = "読み込み中...";
    };

    rf.onload = () => {
      progress_status.textContent = "読み込みに成功しました";
      resolve(rf.result);
    };

    rf.onerror = () => {
      progress_status.textContent = "エラーが発生しました！";
      reject("エラーが発生しました！");
    };
  });
};

/*ドラッグインの時に呼ばれる*/
const handleDragIn = e => {
  /*イベント停止と伝達を無効にする*/
  e.preventDefault();
  e.stopPropagation();
	
	/*エリアに入った時に背景色を変更する*/
  drag_and_drop_area.style.background = "lightblue";
};

/*ドラッグアウトの時に呼ばれる*/
const handleDragOut = e => {
  /*イベント停止と伝達を無効にする*/
  e.preventDefault();
  e.stopPropagation();
	
	/*エリアから出た時に背景色を透明に戻す*/
  drag_and_drop_area.style.background = "transparent";
};

/*ドラッグしたままの時に呼ばれる*/
const handleDrag = e => {
  /*イベント停止と伝達を無効にする*/
  e.preventDefault();
  e.stopPropagation();
};

/*ドロップの時に呼ばれる*/
const handleDrop = e => {
  /*イベント停止と伝達を無効にする*/
  e.preventDefault();
  e.stopPropagation();
	
  /*ファイルを変数に入れる*/
  const file = e.dataTransfer.files[0];

  /*ファイルを読み込みでBase64で値を取得*/
	readFile(file /*ファイルオブジェクト*/, progress_status /*ステータス要素のDOM*/).then(result => {
		
		console.log(result);
		
		/*もし画像だったら*/
		if (file.type === "image/png") {
			
			/*img要素を生成する*/
			let img = document.createElement("img");

			/*Base64の値を格納する*/
			img.src = result;

			/*imgタグをdrag-and-drop-areaの中に追加する*/
			drag_and_drop_area.appendChild(img);
	
		}
	
		/*もし動画だったら*/
		if (file.type === "video/mp4") {
			
			/*video要素を生成*/
			let video = document.createElement("video");

			/*コントロールボタンを有効*/
			video.setAttribute("controls", true);
			
			/*Base64の値を格納する*/
			video.src = result;

			/*videoタグをdrag-and-drop-areaの中に格納する*/
			drag_and_drop_area.appendChild(video);
			
		}
		


		
	});
	
	/*背景色を透明に戻す*/
  drag_and_drop_area.style.background = "transparent";
};



/* イベントリスナーを追加 */
drag_and_drop_area.addEventListener("dragenter", handleDragIn);
drag_and_drop_area.addEventListener("dragleave", handleDragOut);
drag_and_drop_area.addEventListener("dragover", handleDrag);
drag_and_drop_area.addEventListener("drop", handleDrop);