export default function() {
    Array.from(document.querySelectorAll('[data-tabbed=true]')).forEach(tabbed => {
        const header = tabbed.querySelector('.tab-header');
        Array.from(header.children).forEach(element => {
            element.addEventListener('click', () => {
                updateTabVisibility(tabbed, element.dataset.tabIndex);
            })
        });

        updateTabVisibility(tabbed, tabbed.dataset.tabIndex);
    });
}

function updateTabVisibility(tabgroupElement, index) {
    const tabHeaderElems = tabgroupElement.querySelector('.tab-header').children;
    const tabContentsElems = tabgroupElement.querySelector('.tab-content').children;

    for (const element of tabHeaderElems) {
        element.classList.remove('active');
    }

    Array.from(tabHeaderElems).find(e => e.dataset.tabIndex === index).classList.add('active');

    Array.from(tabContentsElems).forEach(e => {
        if (e.dataset.tabIndex === index) {
            e.style.display = "block";
        } else {
            e.style.display = "none";
        }
    });
}