class WizardTab
{
    // form - a form selector
    constructor(form='', curTab=0, tabClass='wiz-tab') {
        this.currentTab = curTab;
        this.tabClass = tabClass;
        this.form = form;
    }

    formSelector(selector) {
        this.form = selector;
    }

    stepCallback(callback) {
        this.stepCB = callback;
    }

    showCurrentTab() {
        this.showTab(this.currentTab); // Display the current tab
    }

    showTab(n) {
        // This function will display the specified tab of the form ...
        var x = document.getElementsByClassName(this.tabClass);
        x[n].style.display = "block";
        // ... and fix the Previous/Next buttons:
        if (n == 0) {
            document.getElementById("wizPrevBtn").style.display = "none";
        } else {
            document.getElementById("wizPrevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
            document.getElementById("wizNextBtn").innerHTML = "Submit";
        } else {
            document.getElementById("wizNextBtn").innerHTML = "Next";
        }
        if (this.stepCB) {
			var inp = x[this.currentTab].querySelector("input:not([type='hidden'])");
			this.stepCB(n, x.length, inp);
		}
        // ... and run a function that displays the correct step indicator:
        this.fixStepIndicator(n)
    }

    nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName(this.tabClass);
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !this.validateForm()) return false;
        // Hide the current tab:
        x[this.currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        this.currentTab = this.currentTab + n;
        // if you have reached the end of the form... :
        if (this.currentTab >= x.length) {
			if (this.stepCB) {
				// Last step pre-submit
				this.stepCB(this.currentTab, x.length);
			}
            //...the form gets submitted:
            document.querySelector(this.form).submit();
            return false;
        }
        // Otherwise, display the correct tab:
        this.showTab(this.currentTab);
    }

    validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName(this.tabClass);
        y = x[this.currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
			var toValidate = y[i].type != "hidden";
			toValidate &= !y[i].closest(".no-validate");
			if (toValidate) {
				// If a field is empty...
				if (y[i].value == "") {
					// add an "invalid" class to the field:
					y[i].className += " invalid";
					// and set the current valid status to false:
					valid = false;
				}
			}
        }

        // Check radio buttons
		var l = x[this.currentTab].querySelector("label.ui-checkboxradio-label");
        if (l) {
			toValidate = !l.closest(".no-validate");
			if (toValidate) {
				y = x[this.currentTab].querySelector("label.ui-checkboxradio-checked");
				x[this.currentTab].className += !y ? " invalid" : "";
				// and set the current valid status to false:
				valid = !!y;
			}
        }    

        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
            document.getElementsByClassName("wiz-step")[this.currentTab].className += " finish";
        }

		// Allow skipping validation
		if (x[this.currentTab].classList.contains("skip-ok")) {
			return true;
		}		
    
        return valid; // return the valid status
    }

    fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
        var i, x = document.getElementsByClassName("wiz-step");
        for (i = 0; i < x.length; i++) {
            x[i].className = x[i].className.replace(" active", "");
        }
        //... and adds the "active" class to the current step:
        x[n].className += " active";
    }
}