// Initialize an array to store the expanded section data-ids
const expandedSections = [];
function navpane() {
    // Sample JSON data
    let isHighlighted = false;
    let currentlyHighlightedElement = null; // Track the currently highlighted element
    // console.log('navpane called');
    var jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
    // console.log(jsonData);
    // var arr = JSON.parse( localStorage.getItem('memoriesdata') );
    // var jsonData2 = JSON.parse(jsonData);
    // console.log(typeof jsonData);
    // console.log('jsonData', jsonData);

   

    function removeParagraphTags(html) {
        return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
    }
    
    function createTreeWithHeading(data, container) {
        const treeTitle = removeParagraphTags(data.question_paper_title);
        const heading = document.createElement('a');
        heading.style.color = '#740fd6';
        const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
        heading.innerHTML = truncatedTitle;
        container.appendChild(heading);
        createTree(data, container);
    }
    
    function createTree(data, container) {
        data.sections.forEach(section => {
            const sectionDiv = document.createElement('div');
            const sectionId = section.section_id;;
            sectionDiv.setAttribute('data-id', sectionId);
            sectionDiv.className = 'section main-heading';

            var splitedSectionId = sectionId.split("_")[3];
            var SectionBox_RawID = 'SectionBox_'+splitedSectionId;
            var SectionBoxID = document.getElementById(SectionBox_RawID)
            // console.log(SectionBoxID);
            
               
            // Check if the section should be initially expanded based on expandedSections
            if (expandedSections.includes(sectionId)) {
                sectionDiv.classList.remove('collapsed');
                
            } else {
                sectionDiv.classList.add('collapsed');
            }
    
            container.appendChild(sectionDiv);
    
            const sectionArrow = document.createElement('span');
            sectionArrow.style.cursor = 'pointer';
            sectionDiv.appendChild(sectionArrow);

            const contentDiv = document.createElement('div');
            contentDiv.className = 'content';

            // Update the arrow icon based on the section's initial state
            if (sectionDiv.classList.contains('collapsed')) {
                sectionArrow.className = 'arrow-right';
            } else {
                sectionArrow.className = 'arrow-down';
                contentDiv.classList.add('visible');
            }

            sectionArrow.addEventListener('click', () => {
                contentDiv.classList.toggle('visible');
                sectionDiv.classList.toggle('collapsed');
    
                // Check if the section is expanded or collapsed
                if (sectionDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(sectionId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    sectionArrow.classList.remove('arrow-down');
                    sectionArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(sectionId);
                    sectionArrow.classList.remove('arrow-right');
                    sectionArrow.classList.add('arrow-down');
                }
            });
            
            const sectionLink = document.createElement('a');
            sectionLink.href = '#' + section.section_id;
            
            // Attach the scroll function to the hyperlinks
            sectionLink.addEventListener('click', function(e) {
                    e.preventDefault(); // Prevent the default behavior of the link
                    const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                    scrollToElement(targetId);
                });
            

            sectionLink.style.color = '#740fd6';
    
            //click event listener to toggle highlighting and boldness if click the Section
            sectionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === sectionLink) {
                    sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    sectionLink.style.fontWeight = 'bold';
                    currentlyHighlightedElement = sectionLink;
                }
            });

            SectionBoxID.addEventListener('click', function() {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === sectionLink) {
                    sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    sectionLink.style.fontWeight = 'bold';
                    currentlyHighlightedElement = sectionLink;
                }
            });
    
            if (section.section_title == null || typeof section.section_title === 'undefined') {
                section.section_title = "sampletitle";
            }
    
            sectionLink.innerHTML = removeParagraphTags(section.section_title);
            sectionDiv.appendChild(sectionLink);
    
            section.questions.forEach(question => {
                createTreeNode(question, contentDiv);
            });
    
            container.appendChild(contentDiv);
        });
    }
    
    function createTreeNode(nodeData, parentNode) {
        const nodeDiv = document.createElement('div');
        nodeDiv.className = "navContain";


        // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
        const nodeDataId = nodeData.question_Id
        const nodeDataType = nodeData.question_type
        // console.log('nodeDataType:',nodeDataType);
        parentNode.appendChild(nodeDiv);


        var bulletPoint = "";
        if (nodeData.question) {
            
            var RawID = "";
            if(nodeDataType == 'text')
            {
                bulletPoint = document.createElement('span');
                bulletPoint.className = "fa fa-text-width";
                bulletPoint.style.marginRight = '5px';
                bulletPoint.style.fontSize = '15px';
                bulletPoint.style.fontWeight = 'bold';
                bulletPoint.style.color = '#00aaff';
                // bulletPoint.textContent = '\u2022';
                bulletPoint.setAttribute("title", "Descriptive");
                nodeDiv.appendChild(bulletPoint);
                
                var splitedId = nodeDataId.split("_")[1];
                RawID = 'removeAndCloneTextQuestion_'+splitedId;


            }else if(nodeDataType == 'group')
            {
                bulletPoint = document.createElement('span');
                bulletPoint.className = "fa fa-check-circle-o";
                bulletPoint.style.marginRight = '5px';
                bulletPoint.style.fontSize = '15px';
                bulletPoint.style.fontWeight = 'bold';
                bulletPoint.style.color = '#00aaff';
                bulletPoint.setAttribute("title", "MCQ");
                // bulletPoint.textContent = '\u2022';
                nodeDiv.appendChild(bulletPoint);

                var splitedId = nodeDataId.split("_")[1];
                RawID = 'removeAndCloneQroupQuestion_'+splitedId;
    
            }
            
            var QuestionID = document.getElementById(RawID)
            // console.log(QuestionID)
           
            const questionLink = document.createElement('a');
            questionLink.href = '#' + nodeDataId;

            // Attach the scroll function to the hyperlinks
            questionLink.addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default behavior of the link
                const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                scrollToElement(targetId);
            });
            questionLink.style.color = '#740fd6';

            if(nodeDataType == 'text')
            {
                questionLink.setAttribute("title", "Descriptive");
            }else if(nodeDataType == 'text'){
                questionLink.setAttribute("title", "MCQ");

            }
              
            QuestionID.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === questionLink) {
                    questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    questionLink.style.fontWeight = 'bold';
                    QuestionID.style.fontWeight = 'normal';
                    currentlyHighlightedElement = questionLink;
                }
            });
            questionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === questionLink) {
                    questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    questionLink.style.fontWeight = 'bold';
                    currentlyHighlightedElement = questionLink;
                }
            });
    
            if (nodeData.question.length > 20) {
                questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '...');
            } else {
                questionLink.innerHTML = removeParagraphTags(nodeData.question);
            }
    
            nodeDiv.appendChild(questionLink);
        } else if (nodeData.group_title) {
            const groupTitleDiv = document.createElement('div');
            const groupTitleId = nodeData.question_group_id;
            groupTitleDiv.setAttribute('data-id', groupTitleId);
            groupTitleDiv.className = 'question-group';
            
            // console.log(groupTitleId);

            var splitedGroupId = groupTitleId.split("_")[3];
            var SplitedGroupRawID = 'QuestionGroupButtons_'+splitedGroupId;
            var GroupBoxID = document.getElementById(SplitedGroupRawID);
            // console.log(GroupBoxID);

    
            // Check if the group should be initially expanded based on expandedSections
            if (expandedSections.includes(groupTitleId)) {
                groupTitleDiv.classList.remove('collapsed');
            } else {
                groupTitleDiv.classList.add('collapsed');
            }
    
            parentNode.appendChild(groupTitleDiv);
    
            const groupTitleArrow = document.createElement('span');
            groupTitleArrow.className = 'arrow-right';
            groupTitleArrow.style.cursor = 'pointer';
            groupTitleDiv.appendChild(groupTitleArrow);

            const groupQuestionsDiv = document.createElement('div');
            groupQuestionsDiv.className = 'content';

            // Update the arrow icon based on the section's initial state
            if (groupTitleDiv.classList.contains('collapsed')) {
                groupTitleArrow.className = 'arrow-right';
            } else {
                groupTitleArrow.className = 'arrow-down';
                groupQuestionsDiv.classList.add('visible');
            }
    
            groupTitleArrow.addEventListener('click', () => {
                groupQuestionsDiv.classList.toggle('visible');
                groupTitleDiv.classList.toggle('collapsed');
    
                // Check if the group is expanded or collapsed
                if (groupTitleDiv.classList.contains('collapsed')) {
                    const index = expandedSections.indexOf(groupTitleId);
                    if (index !== -1) {
                        expandedSections.splice(index, 1);
                    }
                    groupTitleArrow.classList.remove('arrow-down');
                    groupTitleArrow.classList.add('arrow-right');
                } else {
                    expandedSections.push(groupTitleId);
                    groupTitleArrow.classList.remove('arrow-right');
                    groupTitleArrow.classList.add('arrow-down');
                }
            });
    
            const groupQuestionLink = document.createElement('a');
            groupQuestionLink.href = '#' + groupTitleId;
             
            // Attach the scroll function to the hyperlinks
            groupQuestionLink.addEventListener('click', function(e) {
                e.preventDefault(); // Prevent the default behavior of the link
                const targetId = this.getAttribute('href').substring(1); // Get the target element's ID
                scrollToElement(targetId);
            });
            groupQuestionLink.style.color = '#740fd6';
    
            groupQuestionLink.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === groupQuestionLink) {
                    groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    groupQuestionLink.style.fontWeight = 'bold';
                    currentlyHighlightedElement = groupQuestionLink;
                }
            });
            GroupBoxID.addEventListener('click', function () {
                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
                    currentlyHighlightedElement.style.fontWeight = 'normal';
                }
    
                if (currentlyHighlightedElement === groupQuestionLink) {
                    groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                } else {
                    groupQuestionLink.style.fontWeight = 'bold';
                    GroupBoxID.style.fontWeight = 'normal';
                    currentlyHighlightedElement = groupQuestionLink;
                }
            });
    
            if (nodeData.group_title.length > 20) {
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
            } else {
                groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
            }
            groupTitleDiv.appendChild(groupQuestionLink);
    
            
            nodeData.questions.forEach(groupQuestion => {
                createTreeNode(groupQuestion, groupQuestionsDiv);
            });
            parentNode.appendChild(groupQuestionsDiv);
        }
    }

    var questionPaperContainer = document.getElementById('questionPaper');
    
    createTreeWithHeading(jsonData, questionPaperContainer);
    localStorage.setItem("collapse", JSON.stringify((expandedSections)));
    // console.log('expandedSections:',expandedSections);
    // console.log('questionPaperContainer:',questionPaperContainer);

		window.addEventListener('DOMContentLoaded', event => {
			// Toggle the side navigation
			const sidebarToggle = document.body.querySelector('#sidebarToggle');
			if (sidebarToggle) {
				sidebarToggle.addEventListener('click', event => {
					event.preventDefault();
					document.body.classList.toggle('sb-sidenav-toggled');
					let qP = document.getElementById('questionPaper');
					qP.classList.toggle('qP-style');
					localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
				});
			}
		});
    }

   // Function to scroll to the specified element with smooth behavior
    function scrollToElement(elementId) {
        const element = document.getElementById(elementId);
        if (element) {
            element.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    }