var dragStartElement= null;
var dragDropElement=null;
var draggedItem = null;

	//DragStart Function 
	function dragStart(a,e){
		// console.log("Start->",a.id);
		dragStartElement = a;
		a.classList.add('draggedElementStart');
		// draggedItem = this;
        // e.dataTransfer.effectAllowed = 'move';
        // e.dataTransfer.setData('text/html', this.innerHTML);
	}

	//DragOver Function
	function dragOver(element , event) {
		var sectionArea = element.parentNode.previousElementSibling
		if (sectionArea.id.replace(/\d/g, '') == "nav_section_title_" || element.id.replace(/\d+/g, '') == "nav_section_title_") {
			element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
		}else {
			element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
		}

		// console.log("Over -> ",element.id);

		// element.classList.add("dragOverElement")

		// if (element.id.replace(/\d/g, '') == "nav_removeAndCloneTextQuestion_" || element.id.replace(/\d/g, '') == 'nav_removeAndCloneQroupQuestion_') {
		// 	element.style.border = '2px solid rgba(169, 169, 0, 0.5)';
		// } else if(element.id.replace(/\d/g, '') == "nav_draggedGroup_"){
		// 	element.style.border = '2px solid rgba(128, 128, 128, 0.5)';
		// }else{
		// 	element.style.border = '2px solid rgba(255, 0, 0, 0.5)';
		// }
	
		// console.log(element);
		element.style.borderRadius = '5px';
		dragDropElement = element;
	
		if (event.preventDefault) {
			event.preventDefault();
		}
		event.dataTransfer.dropEffect = 'move';
		return false;
	}


	function dragLeave(element, event) {
		element.style.border = 'none';
		// element.classList.remove('dragOverElement');
	}



	//DragEnd Function
	function dragEnd(element, e) {
		// console.log("DragEnd -> ",element.id);
		element.classList.remove('draggedElementStart');
		// element.classList.remove('dragOverElement');

	}


	//DragDrop
	async function  dragDrop(element,e) {
		element.style.border = 'none';
		// element.classList.remove('dragOverElement');
		// console.log("DragDrop -> ", element.id);
		if (e.stopPropagation) {
			e.stopPropagation();
		}
		//Nav Pane full Element 
		const container = document.getElementById('questionPaper');
		const dropTarget = e.target;
		// console.log('dropTarget : ', dropTarget)
		if (container.contains(dropTarget)) {
			//Before Insert OF the HTML Node
			if (e.clientY < dropTarget.getBoundingClientRect().top + dropTarget.clientHeight / 2) {
				console.log("BEFORE INSERTS....");
				//Check Start And Drop Element true And Two Not equal to
				if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {	
					// var list = document.getElementById(dragDropElement.id);
					//Check Drop Element is Group Question 
					if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
						//Check First Element is Group Question 
						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
							var dragStartElementChild = dragStartElement.nextElementSibling;
							// var addbefore = dragStartElement.previousElementSibling;
							dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement);
							// dragStartElement.parentNode.insertBefore(addbefore , dragStartElement)				 
							dragDropElement.parentNode.insertBefore(dragStartElementChild , dragDropElement);
							insertElement(dragStartElement, dragDropElement,"before")
						} else {
							dragDropElement.parentNode.insertBefore(dragStartElement,dragDropElement)
							insertElement(dragStartElement, dragDropElement,"before")
						}
					}else if (dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_") {
						
					}
					else {
						dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement);
						insertElement(dragStartElement,dragDropElement,"before");	
					}			
				}
			} 
			//After Insert of the HTML Node
			else {
				console.log("AFTER INSERT .....");
				//Check Start And Drop Element true And Two Not equal to
				if (dragStartElement && dragDropElement && dragStartElement !== dragDropElement) {	
					// var list = document.getElementById(dragDropElement.id);
					//Check Drop Element is Group Question
					// console.log('First If');
					if (dragDropElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
						// console.log('Second If');
						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
							// console.log('third If');
							var dragDropElementChild = dragDropElement.nextElementSibling.dragStartElementChild;
							var dragStartElementChild = dragStartElement.nextElementSibling;
							if (dragDropElementChild) {
								// console.log('Fourth If');
								dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild)
								dragDropElementChild.parentNode.insertBefore(dragStartElementChild, dragDropElementChild)
								insertElement(dragStartElement,dragDropElement,"after");
							} else {
								// console.log('Fourth If else');
								dragDropElementChild = dragDropElement.nextElementSibling;
								dragDropElementChild.appendChild(dragStartElement)
								dragDropElementChild.appendChild(dragStartElementChild)
								insertElement(dragStartElement, dragDropElement,"after")
								// console.log(dragDropElementChild);
							}
						} else {
							var dragDropElementNextElement=dragDropElement.nextElementSibling.firstChild;
							if (dragDropElementNextElement) {
								dragDropElementNextElement.parentNode.insertBefore(dragStartElement, dragDropElementNextElement)
								insertElement(dragStartElement ,dragDropElement,"after")
							} else {
								dragDropElementNextElement = dragDropElement.nextElementSibling;
								dragDropElementNextElement.appendChild(dragStartElement);
								insertElement(dragStartElement , dragDropElement, "after")
							}
						}				
					}
					//Check Drop Element is Section 
					else if(dragDropElement.id.replace(/\d+/g, '') == "nav_section_title_"){
						// console.log('Second else If');
						var dragDropElementChild = dragDropElement.nextElementSibling.firstChild;
						if (dragDropElementChild) {
								dragDropElementChild.parentNode.insertBefore(dragStartElement , dragDropElementChild);
								insertElement(dragStartElement, dragDropElement);
						} else {
							if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
								var firstChild = dragStartElement.nextElementSibling;
								dragDropElementChild = dragDropElement.nextElementSibling;
								dragDropElementChild.appendChild(dragStartElement);
								dragDropElementChild.appendChild(firstChild)
							} else {
							dragDropElementChild = dragDropElement.nextElementSibling;
							dragDropElementChild.appendChild(dragStartElement);
							insertElement(dragStartElement, dragDropElement);
							}
						}
					}
					//THis Entered in Text and Choice Question 
					else {
						// console.log('Second If else');
						//Check the Start Element is Group Question 
						if (dragStartElement.id.replace(/\d+/g, '') == "nav_draggedGroup_") {
							// console.log('Second if else if')
							var parent = dragDropElement.parentNode;
							// console.log('parent : ', parent)
							var lastChild = parent.lastChild;
							// console.log('lastChild : ', lastChild);
							var dragStartElementChild = dragStartElement.nextElementSibling;
							parent.insertBefore(dragStartElement, lastChild.nextElementSibling);
							parent.insertBefore(dragStartElementChild , dragStartElement.nextElementSibling);
							insertElement(dragStartElement , dragDropElement , "after");
						}
						// this Entered Text and Choice Question 
						else {
							// console.log('Second if else else')
							dragDropElement.parentNode.insertBefore( dragStartElement, dragDropElement.nextElementSibling);
							insertElement(dragStartElement,dragDropElement,"after");
							// dragStartElement = null;
							// dragDropElement = null;	
						}					
					}			
				}
			}
		}
	}

	//THis function is Replicate the Nav Pane Change
	function insertElement(dragStartElement, dragDropElement, position){


		var mainpaneSection = document.getElementById('addNewSection')
		var matches = dragDropElement.id.match(/([a-zA-Z_]+)([0-9]+)/);
         
		var Section = document.getElementById('question_area_'+matches[2]);
		var innerElementCount = ''
		if(Section){
			innerElementCount = Section.childElementCount;
		}
		else{
			innerElementCount = 1;
		}

        if(innerElementCount === 0){
			var QuestionStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
			var QuestionDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);

				//Check First Element is Group 
				if (QuestionStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
					if (QuestionStartElement && Section && QuestionStartElement !== Section) {		
						Section.appendChild(QuestionStartElement)
					}
				} else {
					if (QuestionStartElement && Section && QuestionStartElement !== Section) {		
						Section.appendChild(QuestionStartElement)
					}
				}
		}else{

			//Check All is true this for 
			if (dragStartElement && dragDropElement && position) {
				
				//Check IS before 
				if (position == "before") {
					//Check DragFirst Element have id 
					if (!dragStartElement.id) {
						var dragStartElementChild = dragStartElement.dragStartElementChild
						var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElementChild.id.replace(/^nav_/, '')}`);
						var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
						if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
							maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
						}
					} else {
						var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
						var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
						if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {			
							maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement);
						}
					}
				}
				// After element Node Added
				else {
					var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
					var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
                    
					// console.log('maindragDropElement : ', maindragDropElement);

					// End Element is Section 
					if (maindragDropElement.id.replace(/\d+/g, '') == "section_title_") {
						//Check First Element is Group 
						if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
							var groupQuestionAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area')
							// console.log('groupQuestionAddSection : ', groupQuestionAddSection);
							if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
								groupQuestionAddSection.appendChild(maindragStartElement)
								// test.parentNode.insertBefore(maindragStartElement, test)
							}
						} else {
							var textAndChoiceAddSection = maindragDropElement.nextElementSibling.querySelector('.section-question-area');
							// console.log('textAndChoiceAddSection : ', textAndChoiceAddSection);
							if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
								textAndChoiceAddSection.parentNode.insertBefore(maindragStartElement, textAndChoiceAddSection)
							}
						}
					} 
					//Check the Second Element is Group Question 
					else if(maindragDropElement.id.replace(/\d+/g, '') == "draggedGroup_"){
						//Check First Element is Group Question 
						if (maindragStartElement.id.replace(/\d+/g, '') == "draggedGroup_") {
							var groupQuestionAddGroupQuestion = maindragDropElement.querySelector('.nested-sortable');
							if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
								groupQuestionAddGroupQuestion.appendChild(maindragStartElement)
							}
						} 
						//This allows Text and Choice 
						else {
							var groupQuestionAddTextChoice= maindragDropElement.querySelector('.nested-sortable').dragStartElementChild;
							if (groupQuestionAddTextChoice) {
								groupQuestionAddTextChoice.parentNode.insertBefore(maindragStartElement , groupQuestionAddTextChoice)
							} else {
								var groupQuestionAdd = maindragDropElement.querySelector('.nested-sortable')
								// console.log(groupQuestionAdd);
								groupQuestionAdd.appendChild(maindragStartElement)
								// console.log(groupQuestionAdd);
								// alert("111")
								// test.parentNode.insertBefore(maindragStartElement , test)
							}
						}
					}else{
						// console.log('parentNode : ', maindragDropElement.parentNode);
						// console.log('maindragStartElement : ', maindragStartElement);
						maindragDropElement.parentNode.insertBefore(maindragStartElement , maindragDropElement.nextSibling)
					}		
				}
			} 
			//no need 
			else {

				console.log('ELSE');
				var maindragStartElement = mainpaneSection.querySelector(`#${dragStartElement.id.replace(/^nav_/, '')}`);
				var maindragDropElement = mainpaneSection.querySelector(`#${dragDropElement.id.replace(/^nav_/, '')}`);
				if (maindragStartElement && maindragDropElement && maindragStartElement !== maindragDropElement) {		
					maindragDropElement.parentNode.insertBefore( maindragStartElement, maindragDropElement.nextElementSibling);
				}
			}

		}

		const strippedId = dragStartElement.id.replace('nav_', '');
		console.log(strippedId);

		const element = document.getElementById(`${strippedId}`);
		console.log(element);
		if (element) {
			
			element.focus();
			element.scrollIntoView({ behavior: "smooth", block: "center" });
		}

	}