/* OTP Quick Link Navigation Script */
/*
Created by: Adil Sami (Dynamic Integrated Services)
Created for: Veterans Affairs
Created on: 11-09-2023
Last updated: 11-30-2023

Version: 1.0

Purpose:
Create a Quick link Navigation funtionality that targets all <h3> header elements to be displayed inside a container at he top of the page for easier navigation purposes.
*/

const innerContent = document.currentScript.parentElement;
// Check if the container exsist on the page
if(innerContent) {

    // Find the intro text element - DISPLAY OPTION 1
    const vaIntrotext = innerContent.querySelector('.intro-text');
    // Find the page title element - DISPLAY OPTION 2
    const pageTitle = innerContent.querySelector('.page-title');
    // Find the .otp-block element - DISPLAY OPTION 3
	const otpPageNav = innerContent.querySelector('.otp-block');

	// Grab all the header 3 on the website
	const titleHeader = innerContent.querySelectorAll('h3');

    //If h3s are present, build the necessary elements for the OTP structure
    if (titleHeader.length > 0) {

        // Create the main navigation structure
        //const navElement = document.createElement('nav');
        const navElement = document.createElement('div');
        navElement.role="navigation";
        navElement.id = 'content-links';
        navElement.setAttribute('aria-labelledby', 'on-this-page');
        // Create a dl
        const dlElement = document.createElement('dl');
        dlElement.classList.add('va-on-this-page');
        // Create a dt
        const dtElement = document.createElement('dt');
        dtElement.id = 'on-this-page';
        dtElement.textContent = 'On this page';
        // Create a dd tag to nest the links
        const ddElement = document.createElement('dd');
        ddElement.classList.add('va-on-this-page-definition');
        //ddElement.role = 'definition';
        
        // loop through each header
        titleHeader.forEach((titleHeader) => {

            // Create a link tag
            let link = document.createElement('a');

            // Grab the <span> tag inside each <h3>
            spanElement = titleHeader.querySelector('span');
            
            // Check if there is any <h3> title tags available if so grab the <span> inside 
            if(!titleHeader.classList.contains('otp-exclude')) {

                // Grab the id of the <h3>
                titleIDValue = titleHeader.id.trim();
                //Start filling link element with required content
                link.innerHTML = '<i class="fas fa-arrow-down" aria-hidden="true"></i>&nbsp;';
                link.href = '#' + titleIDValue;

                // Check for the presence of a span element that it has the specified class to use its text, otherwise use the full h3 text
                if(spanElement && spanElement.classList.contains("heading-short")) {
                    // Add h3>span.heading-short content with uppercase first letter
                    const headingText = spanElement.textContent.trim();
                    const uppercaseFirstLetter = headingText.charAt(0).toUpperCase() + headingText.slice(1);
                    link.innerHTML = link.innerHTML + uppercaseFirstLetter + ' ';
                }else {
                    //Add h3 content
                    link.innerHTML = link.innerHTML + titleHeader.textContent.trim();
                }

                //Append this instance of link to the dd element
                ddElement.appendChild(link);
            }
        });

        // Choose the first available DISPLAY OPTIONS
        const targetElement = vaIntrotext || pageTitle;

        
        // Append the dt to the dl
        dlElement.appendChild(dtElement);
        // Append the dt to the dd
        dlElement.appendChild(ddElement);
        // Append the dl to the nav
        navElement.appendChild(dlElement);
        // Look for otpPageNav if found only display inside that div element if not found then display under targetElement
        if (otpPageNav) {
            otpPageNav.innerHTML = navElement.outerHTML;
        } else {
            targetElement.insertAdjacentHTML('afterend', navElement.outerHTML);
        }

    }else {
        // No titles found, hide the navElement
        otpPageNav.style.display = 'none';
    }
    
} else {
	console.error('Container not found on the page');
}