<script>
(() => {
    const SCRIPT_NAME = 'wpeSplideButtons';
    const controlWrapperSelector = '.wpe-splide-buttons';

    /* use wpeData to track any of our scripts */
    /* If this is the first script, define wpeData */
    if (undefined === window.wpeData) { window.wpeData = []; }
    /* If no scripts have run, define wpeData.scripts */
    if (undefined === window.wpeData.scripts) { window.wpeData.scripts = []; }

    /* If window.wpeData.splideControls has not been defined, define it. */
    if (undefined === window.wpeData.splideControls) { window.wpeData.splideControls = {}; }

    /* If this script has already run, simply return and do not execute */
    if (undefined !== window.wpeData.scripts[SCRIPT_NAME]) { return; }
    window.wpeData.scripts[SCRIPT_NAME] = true;

    const updateButtons = (buttons, newIndex) => {
        buttons.forEach((btn, idx) => {
            if (idx === newIndex) {
                btn.setAttribute('aria-pressed', 'true');
                btn.setAttribute('data-active', 'true');
            } else {
                btn.setAttribute('aria-pressed', 'false');
                btn.setAttribute('data-active', 'false');
            }
        });
    };

    document.addEventListener('DOMContentLoaded', () => {

        const controlWrappers = document.querySelectorAll(controlWrapperSelector);

        const init = () => {
            Array.from(controlWrappers).forEach(el => {
                let sliderId = el.dataset.wpeSplideId;
                sliderId = sliderId.replace('brxe-', ''); /* Remove 'brxe-' prefix */
                const sliderInstance = bricksData.splideInstances[sliderId];
                window.wpeData.splideControls[el.id] = sliderInstance;

                /* Dispatch custom event so other JS can interact */
                const event = new CustomEvent(`${SCRIPT_NAME}:init`, {
                    detail: {
                        controlId: el.id,
                        sliderId: sliderId,
                        splideInstance: sliderInstance
                    }
                });
                window.dispatchEvent(event);

                const slides = sliderInstance.Components.Elements.slides;
                const buttons = el.querySelectorAll('button');
                buttons.forEach((btn, idx) => {
                    btn.setAttribute('data-index', idx);
                    btn.setAttribute('aria-controls', slides[idx].id);
                    btn.addEventListener('click', event => {
                        const { currentTarget } = event;
                        const slideIndex = parseInt(currentTarget.dataset.index, 10);
                        sliderInstance.go(slideIndex);
                    });
                });

                /* Set the first button to active on initialization */
                updateButtons(buttons, 0);

                /* Listen to the moved event to update buttons */
                sliderInstance.on('moved', (newIndex) => {
                    updateButtons(buttons, newIndex);
                });
            });

            /* Dispatch the 'initComplete' event after initialization */
            const initCompleteEvent = new CustomEvent(`${SCRIPT_NAME}:initComplete`);
            window.dispatchEvent(initCompleteEvent);
        };

        /* allow time for Bricks to init slider, hopefully in future there will be an event */
        setTimeout(() => {
            init();
        }, 250);

    });
})();

</script>