jQuery(function ($) {
    $(document).ready(() => {
        // getting All the container that have class wdac-switcher 
        const switcherAnchorContainer = Array.from(document.getElementsByClassName('wdac-switcher'));

        switcherAnchorContainer.forEach((el) => {
            const childrenArray = Array.from(el.children);

            // Add wdac-active to first child.
            childrenArray[0].classList.add('wdac-active');
            
            // Getting connnection list from connection provided so we can support one switcher with multiple connections
            const connectionList = Array.from(document.querySelectorAll(el.dataset.connectSwitcher));

            // Initialize with first element being active and hide all other
            connectionList.forEach((connectionContainerEl) => {
                
                Array.from(connectionContainerEl.children).forEach((el) => {
                    el.classList.add('wdac-hidden');
                });

                if(connectionContainerEl.children[0] !== undefined) {
                    connectionContainerEl.children[0].classList.remove('wdac-hidden');
                } else {
                    console.warn("Connection has no children");
                }
            });

            // Adding eventListner to the container children one by one
            childrenArray.forEach((childEl) => {
                childEl.addEventListener('click', (event) => {
                    // Getting the index of element that is clicked to map it to the connection
                    const indexOfSelectedEl = childrenArray.indexOf(event.currentTarget);

                    // Remove wdac-active from all child nodes
                    childrenArray.forEach((el) => {el.classList.remove('wdac-active')});

                    // Add wdac-active to current selected node
                    event.currentTarget.classList.add('wdac-active');

                    connectionList.forEach((connectionContainerEl) => {
                        if(connectionContainerEl.children[indexOfSelectedEl] !== undefined) {
                            // Trying to rmeove visible from all elements and adding hidden to all of them initially
                            Array.from(connectionContainerEl.children).forEach((el) => {
                                // el.classList.remove('wdac-visible');
                                el.classList.add('wdac-hidden');
                            });

                            // If element is present add visible class else warn the user
                            connectionContainerEl.children[indexOfSelectedEl].classList.remove('wdac-hidden');
                        } else {
                            console.warn("Connection has less number of children than switcher");
                        }
                    });
                }, true);
            });
        });
    });
});