<script defer>
/*
NOTES:
1. Use "defer" instead of waiting for DOMContentLoaded. this is so it renders properly in the Bricks Editor
*/

; (() => {
    const brxTransitionTime = 250; // set slightly higher than the UI setting. this is in case the first item is open
    /* Selector definitions */
    const accordionBlockClass = '.wpeasy-accordion';
    const itemSelector = accordionBlockClass + '__item';
    const buttonSelector = accordionBlockClass + '__button';
    const accordionPanelSelector = accordionBlockClass + '__accordion-panel';

    const allAccordionBlocks = document.querySelectorAll(accordionBlockClass);
    const allAccordionPanels = document.querySelectorAll(accordionPanelSelector);
    const allButtons = document.querySelectorAll(buttonSelector);

   
    /**************************
     * FUNCTIONS
     */
    const generateRandomString = (length) => {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        let result = '';

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            result += characters.charAt(randomIndex);
        }
        return result;
    }

    const setWpeOpenState = currentItem => {
        const block = currentItem.closest(accordionBlockClass);
        const classList = currentItem.classList;
        const isOpen = classList.contains('wpe-open');

        const scriptArgs = getScriptArgs(block);
        if(scriptArgs){
            if(!scriptArgs.includes('independentToggle')){
                //remove wpe from all block items other than this
                block.querySelectorAll(itemSelector).forEach( element => {
                    if(currentItem !== element){
                        element.classList.remove('wpe-open');
                    }
                });
            }
        }

        if (isOpen) {
            currentItem.classList.remove('wpe-open');
            currentItem.querySelector(buttonSelector).setAttribute('aria-expanded', false);
        } else {
            currentItem.classList.add('wpe-open');
            currentItem.querySelector(buttonSelector).setAttribute('aria-expanded', true);
        }
    }

    const setAllAriaExpandedToFalse = block => {
        const blockItems = block.querySelectorAll(itemSelector);
        blockItems.forEach(item => {
            item.querySelector(buttonSelector).setAttribute('aria-expanded', false);
        });
    }

    const getScriptArgs = block => {
        const scriptArgsEl = block.querySelector('[data-script-args]');
        if(scriptArgsEl){              
          return scriptArgsEl.dataset.scriptArgs.split(',');
        }else{
            return false;
        }
    }

    /***************************
     * Add uniques IDs to elements that need the, if they don't have one defined already
     */
    allAccordionPanels.forEach(el => {
        if (!el.id) {
            el.id = 'wpe-' + generateRandomString(5);
        }
    });
    allButtons.forEach(el => {
        if (!el.id) {
            el.id = 'wpe-' + generateRandomString(5);
        }
    });


    /******************************
     * Event listeners
     */
    allButtons.forEach(button => {
        button.addEventListener('click', event => {
            const { currentTarget } = event;
            const myItem = currentTarget.closest(itemSelector);
            setWpeOpenState(myItem);
        })
    })

    /***************************
     * Initialisation
     */
    const init = () => {
        allAccordionBlocks.forEach(block => {
            const myItems = block.querySelectorAll(itemSelector);
            myItems.forEach((item, index) => {
                const button = item.querySelector(buttonSelector);
                const panel = item.querySelector(accordionPanelSelector);

                button.setAttribute('aria-controls', panel.id);
                panel.setAttribute('aria-labelledby', button.id);
                panel.setAttribute('role', 'region');
            });

            setAllAriaExpandedToFalse(block);

            const scriptArgs = getScriptArgs(block);
            if(scriptArgs){              
                if(scriptArgs.includes('expandFirstItem')){
                    setWpeOpenState(myItems[0]);
                }
            }
        });
    }
    init();
})();
</script>