/* Functionality for custom accordions */
/*
    Created by: Tim Jeffreys and Adil Sami (Dynamic Integrated Services)
    Created for: Veterans Affairs
    Created on: 2023-06-16
    Last updated: 2024-04-18

    Version: 1.1.1

    PURPOSE:
    Finds all .accordion-custom blocks on the page and adds attritbutes and listeners to ensure each is accessible and generally functional. Also included is the optional show/hide toggle augmentation for pages where such a toggle is desired to expand and collapse all accordions in one click.

    Style note: variables are prefixed with their type to improve understanding of structure and interactions. Example: nl = nodeList, el = Element, arr = Array
    
    UPDATES: 
    v1.1.0 - Included show/hide all toggle and adjusted variable naming style
*/

//-A- Revise all .accordion-custom blocks (and children) with appropriate attributes and functionality
const nlAccordions = document.getElementsByClassName("accordion-custom");

//Iterate through all accordions
for(let a = 0; a < nlAccordions.length; a++) {

    nlAccordions[a].setAttribute("aria-label","Accordion group " + (a + 1));

    let elThisContent = nlAccordions[a].querySelector("div");
    elThisContent.setAttribute("id", nlAccordions[a].getAttribute("id") + "-content");
    elThisContent.setAttribute("aria-expanded","false");

    let elAccBtn = nlAccordions[a].querySelector(":first-child > button");
    elAccBtn.setAttribute("aria-pressed","false");
    elAccBtn.setAttribute("aria-controls", nlAccordions[a].getAttribute("id") + "-content")

    elAccBtn.addEventListener("click", function(e) {
        e.stopPropagation(); //Prevents click from getting dampened by child elements of e.target.

        let elMyBtn;

        if(e.target.nodeName != "BUTTON") {
            elMyBtn = e.target.closest("h4 > button");
            console.log(elMyBtn);
        }else{
            elMyBtn = e.target;
            console.log(elMyBtn);
        }

        
        
        if(elMyBtn.getAttribute("aria-pressed") == "false") {
            elMyBtn.setAttribute("aria-pressed","true");
            elMyBtn.parentElement.nextElementSibling.setAttribute("aria-expanded","true");
        }else{
            elMyBtn.setAttribute("aria-pressed","false");
            elMyBtn.parentElement.nextElementSibling.setAttribute("aria-expanded","false");
        }

    }, false);

}

//-B- ADD-ON: Optional Toggle to Show/Hide All
// Show all accordions on click of a single button. Targets <button> element in accordion since those already have eventListeners attached that drive the display of the accordion content and metadata.

// Get the show/hide button
const elAccToggle = document.getElementById('acc-toggle');

// When clicked toggle accordions to expand and collapse, and change text accordingly to show or hide
elAccToggle.addEventListener('click', function() {

    //Get text content out of first child node of the button since there is now an <i> element to hold an icon
    let strBtnState = elAccToggle.firstChild.textContent;

    console.log(strBtnState);

    //Iterate through the list of accordions
    for (let x = 0; x < nlAccordions.length; x++) {

        //Target accordion button since it already drives toggle for each accordion
        let elItemButton = nlAccordions[x].querySelector('h4 > button, h3 > button, h5 > button, h6 > button');

        //Expand this accordion BUT only if the button IS NOT pressed
        if (strBtnState == 'Show All') {
            if(elItemButton.getAttribute("aria-pressed") == "false"){
                elItemButton.click();
            }
        //Or close this accordion ONLY IF the button IS pressed
        } else {
            if(elItemButton.getAttribute("aria-pressed") == "true"){
                elItemButton.click();
            }
        }
    }

    //Change toggle button state outside of the loop so it only changes once.
    if (strBtnState == 'Show All') {
        elAccToggle.innerHTML = 'Hide All';
        elAccToggle.setAttribute("aria-pressed","true");
    } else {
        elAccToggle.innerHTML = 'Show All';
        elAccToggle.setAttribute("aria-pressed","false");
    } 
});