document.addEventListener('DOMContentLoaded', () => {
    let btn = document.querySelector('.modalButton');
    btn.click();
});



// Detecting part
const isMobile = function(){
    const match = window.matchMedia('(pointer:coarse)');
    return (match && match.matches)
}
console.log(`${isMobile() ? 'mobile' : 'not mobile'}`);

// Global Variables for Mobile
let originalX = 0;
let originalY = 0;
let counter = 0;
let itemAppend = null;

if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') {

    const draggableElements = document.querySelectorAll(".draggable");
    const droppableElements = document.querySelectorAll(".droppable");
    
    draggableElements.forEach(elem => {
	elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data
	// elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged
	// elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete
    });
    
    droppableElements.forEach(elem => {
	elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target
	elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone
	elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target
	elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target
    });
    
    // Drag and Drop Functions //
    
    //Events fired on the drag target
    function dragStart(event) {
	event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value
    }
    
    //Events fired on the drop target
    function dragEnter(event) {
	if(!event.target.classList.contains("dropped")) {
	    event.target.classList.add("droppable-hover");
	}
    }
    
    function dragOver(event) {
	if(!event.target.classList.contains("dropped")) {
	    event.preventDefault(); // Prevent default to allow drop
	}
    }
    
    function dragLeave(event) {
	if(!event.target.classList.contains("dropped")) {
	    event.target.classList.remove("droppable-hover");
	}
    }
    
    
    function drop(event) {

	event.preventDefault(); // This is in order to prevent the browser default handling of the data
	event.target.classList.remove("droppable-hover");
	const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method
	const droppableElementData = event.target.getAttribute("data-draggable-id");
	const isCorrectMatching = draggableElementData === droppableElementData;

	if(isCorrectMatching) {
	    const draggableElement = document.getElementById(draggableElementData);
	    event.target.classList.add("dropped");
	    // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: 
	    event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color;
	    draggableElement.classList.add("dragged");
	    draggableElement.setAttribute("draggable", "false");
	    event.target.insertAdjacentHTML("afterbegin", `<i class="fas fa-${draggableElementData}"></i>`);
	    
	    counter++;
		console.log("counter:", counter)
	    if (counter == 6){
            const btn = document.querySelector(".moveOn");
            btn.disabled = false;
            localStorage.setItem("roll", "Üliõpilase");
            btn.onclick = () => location.href = "../../../endPage";
	    }
	} // If isCorrectMatchingEnd
  }  // Drop Func End

}  // If Desktop End


//If mobile

else{

	const empty = Array.from(document.querySelectorAll('.empty'));
	const drags = document.querySelectorAll('.drag');

	drags.forEach(drag => {
		drag.addEventListener('pointerdown', pointerDown);
		drag.addEventListener('pointermove', pointerMove);
		drag.addEventListener('pointerup', pointerUp);
	})
	
	
	// Function when start touch
	function pointerDown(e){
		e.preventDefault();

		let remVal = parseInt(getComputedStyle(document.documentElement).fontSize);
		originalTop  =	e.target.getBoundingClientRect().top - 2*remVal;
		originalLeft =	e.target.getBoundingClientRect().left - remVal;
	}
	
	
	// Function while movin
	function pointerMove(e){
		e.preventDefault();

		//Scrolling Part
		if (window.innerHeight - e.screenY < 600){
			window.scrollBy({ 
				top: 100, // could be negative value
				behavior: 'smooth' 
			});
		}
		
		else if (e.clientY < 200){
			window.scrollBy({ 
				top: -100, // could be negative value
				behavior: 'smooth' 
			});
		}

		nimi = e.target;
		if (!nimi.classList.contains('done')){
			
			nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`;
			nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`;
			
			empty.map(item => {
				if (
					nimi.getBoundingClientRect().top    + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom &&
						nimi.getBoundingClientRect().right  - nimi.offsetWidth / 2 > item.getBoundingClientRect().left &&
						nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top &&
						nimi.getBoundingClientRect().left   + nimi.offsetWidth / 2 < item.getBoundingClientRect().right
				) {
					item.classList.add('active');
					itemAppend = item;
				}
				else {
					item.classList.remove('active');
				}
			}); //empty.map loop end
		} 
		
		// if currentDrag has class done
		else{
			console.log("has class done")
		}
		
	}
	
	
	// Function if touch is stopped
	function pointerUp(e){
		e.preventDefault();

		if (itemAppend != null){
			
			if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) {
				this.classList.add('done')
				this.parentElement.classList.add('done')
				itemAppend.classList.add('done');
				itemAppend.classList.remove('active');
				
				this.style.top = `${originalTop}px`;
				this.style.left = `${originalLeft}px`;
				//this.innerHTML="";
				
				counter++;
				console.log("counter:", counter)
				if (counter == 6){
                    const btn = document.querySelector(".moveOn");
                    btn.disabled = false;
                    btn.onclick = () => location.href = "#";
				}
				
			}
			else {
				
				this.style.top = `${originalTop}px`;
				this.style.left = `${originalLeft}px`;
				this.parentElement.appendChild(this);
				itemAppend.classList.remove('active');
			}
		}
		else {
			this.style.top = `${originalTop}px`;
			this.style.left = `${originalLeft}px`;
			console.log("FakAp");
		}  // PointerUp Func End

		window.scroll({ 
			top: 0,
			left: 0, 
			behavior: 'smooth' 
		});
	}


} // If mobile End