const firstOnboardingCard = "intro";

function switchOnboardingCard(card) {
    Array.from(document.querySelectorAll("form.onboarding > fieldset")).map(node => {
        if (node.id == card) {
            node.style.display = "block";
        } else {
            node.style.display = "none";
        }
    });

    Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")).map(node => {
        if (node.id == card) {
            node.classList.add("active")
        } else {
            node.classList.remove("active")
        }
    })
};

window.kittybox_onboarding = {
    switchOnboardingCard
};

document.querySelector("form.onboarding > ul#progressbar").style.display = "";
switchOnboardingCard(firstOnboardingCard);

function switchCardOnClick(event) {
    switchOnboardingCard(event.target.dataset.card)
}

function multiInputAddMore(event) {
    let parent = event.target.parentElement;
    let template = event.target.parentElement.querySelector("template").content.cloneNode(true);
    parent.prepend(template);
}

Array.from(document.querySelectorAll("form.onboarding > fieldset button.switch_card")).map(button => {
    button.addEventListener("click", switchCardOnClick)
})

Array.from(document.querySelectorAll("form.onboarding > fieldset div.multi_input > button.add_more")).map(button => {
    button.addEventListener("click", multiInputAddMore)
    multiInputAddMore({ target: button });
})