// data-tabs-group = The group
// data-tabs-id  = The item number (id) of the tab within the group
// data-tabs-tab     = If the element is a tab object (to be toggled)
// data-tabs-button  = An element that will toggle the tabs of its group/id

// Make each 'tab' have a click event.
let tabButtons = document.querySelectorAll('[data-tabs-button]');
// document.querySelectorAll('[data-foo="1"]');
// let tabs = document.getElementsByClassName('tab');
for (let i = 0; i < tabButtons.length; i++) {
    tabButtons[i].addEventListener('click', function (event) { 

        let tabGroup = this.dataset.tabsGroup;
        let tabId = this.dataset.tabsId;
        let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]');

        hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */
        tabToShow.classList.remove("hide"); /* Show the tab that's been selected */
        otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */

    });
}

// When id=0 it's the default, so tab=1, OR tabs-active
// group=0 also default to ALL the tabgroups, not just one specified
function hideTabs(id=0, group=0){
    // Hide all tabs but those I don't wanna
    let query = '[data-tabs-tab][data-tabs-id]';
    if(group == 0){
        // Tabs that aren't default
        query +=':not([data-tabs-default])';
    }else{
        // Tabs in group (filtered in loop via their id)
        query +='[data-tabs-group="'+group+'"]';
    }
    let tabs = document.querySelectorAll(query);
    for (let i = 0; i < tabs.length; i++) {
        if(id == 0){
            tabs[i].classList.add("hide");
        }
        if(id != 0 && tabs[i].dataset.tabsId != id){
            tabs[i].classList.add("hide");
        }
    }
}

// On page load, display:none all the tabs that shouldn't be shown
// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly)
hideTabs();

function otherTabTasks(tabToShow, tabGroup, tabId){
    // This should be streamlined I reckon
    if(tabGroup == 'servers'){

        document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio');

        if(tabId == 'minecraft'){
            document.getElementById('servers').classList.add('servers-bg--mc');
        }
        else if(tabId == 'factorio'){
            document.getElementById('servers').classList.add('servers-bg--factorio');
        }

        // Uh oh, loop each 'button' in the ul and have only the current one be 'selected'
        // Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes
        let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]';
        let buttons = document.querySelectorAll(query);
        for (let i = 0; i < buttons.length; i++) {
            if(buttons[i].dataset.tabsId == tabId){
                buttons[i].classList.add("button--blue");
            }else{
                buttons[i].classList.remove("button--blue");
            }
        }
    }
}