function FormStep(id, formInputs, nextBtn, prevBtn, hiddenInputs) {
    this.id = id;
    this.formInputs = document.querySelectorAll(formInputs);
    this.nextBtn = document.querySelectorAll(nextBtn);
    this.prevBtn = document.querySelectorAll(prevBtn);

    this.addInput('form', id)
    if (hiddenInputs && hiddenInputs.length) {
        for (var i = 0; i < hiddenInputs.length; i++) {
            this.addInput(hiddenInputs[i].name, this.urlToName(hiddenInputs[i].value))
        }
    }

    this.onNextStep = this.onNextStep.bind(this);
    this.onPrevStep = this.onPrevStep.bind(this);

    for (var i = 0; i < this.formInputs.length; i++) {
        if (/*(i < this.nextBtn.length - 1) &&*/(this.formInputs[i].tagName != 'TEXTAREA')) {
            this.formInputs[i].addEventListener('keypress', this.onNextStep);
        }
    }

    for (var i = 0; i < this.nextBtn.length; i++) {
        //if (i < this.nextBtn.length - 1) {
            this.nextBtn[i].addEventListener('click', this.onNextStep);
        //}

        if (i == 0) {
            this.showChoice(i + 1);
        } else {
            this.hideChoice(i + 1);
            this.prevBtn[i - 1].addEventListener('click', this.onPrevStep);
        }
    }
}

FormStep.prototype.onNextStep = function (evt) {
    const evtClick = (evt.type !== 'keypress')
    const evtEnter = ((evt.type === 'keypress') && (evt.key === 'Enter'))
    if (evtClick || evtEnter) {
        var lastStep = parseInt(evt.target.dataset.step) == this.nextBtn.length
        if (evtEnter && !lastStep) {
            evt.preventDefault();
        }

        var stepTest = this.checkStep(evt, evt.target.dataset.step);
        /*var lastStep = parseInt(evt.target.dataset.step) == this.nextBtn.length
        if (stepTest && lastStep) {
            return document.getElementById(this.id).submit()
        }*/

        return stepTest
    }

    return false;
}

FormStep.prototype.onPrevStep = function (evt) {
    this.hideChoice(evt.target.dataset.step);
    this.showChoice(evt.target.dataset.step - 1);
}

FormStep.prototype.checkStep = function (evt, step) {
    step = parseInt(step)

    var stepInputs = this.stepInput(step)

    if (this.checkInputs(stepInputs)) {
        var errMsg = document.getElementById('errormsg-0' + step);
        if (errMsg) {
            errMsg.style.display = 'none';
        }
        this.hideChoice(step);
        this.showChoice(step + 1);
        return true;
    }

    evt.preventDefault();
    document.getElementById('errormsg-0' + step).style.display = 'block';
    //document.getElementById('flowsubmit').disabled = true;
    this.hideChoice(step + 1);
    this.showChoice(step);
    return false;
}

FormStep.prototype.showChoice = function (step) {
    if (step <= this.nextBtn.length) {
        document.querySelector('.div-choice-0' + step).className = document.querySelector('.div-choice-0' + step).className
                .replace(' div-choice-enabled', '')
                .replace(' div-choice-disabled', '')
            + ' div-choice-enabled';
        var stepInputs = this.stepInput(step)
        if (stepInputs.length) {
            stepInputs[0].focus();
        }
    }
}

FormStep.prototype.hideChoice = function (step) {
    if (step <= this.nextBtn.length) {
        document.querySelector('.div-choice-0' + step).className = document.querySelector('.div-choice-0' + step).className
                .replace(' div-choice-enabled', '')
                .replace(' div-choice-disabled', '')
            + ' div-choice-disabled';
    }
}

FormStep.prototype.stepInput = function (step) {
    var stepInputs = []
    for (var i = 0; i < this.formInputs.length; i++) {
        if (this.formInputs[i].dataset.step == step) {
            stepInputs.push(this.formInputs[i])
        }
    }

    return stepInputs
}

FormStep.prototype.checkInputs = function (inputs) {

    var checks = []
    for (var i = 0; i < inputs.length; i++) {
        checks.push(this.checkInput(inputs[i]))
    }

    return checks.filter(function (check) { return check == true }).length == inputs.length
}

FormStep.prototype.checkInput = function (input) {
    switch (input.type) {
        case 'email':
            return this.checkInputEmail(input)
        case 'text':
        default:
            switch (input.dataset.validator) {
                case 'alpha-min-3':
                    return this.checkInputText(input, 3)
                case 'alpha-min-4':
                    return this.checkInputText(input, 4)
                case 'alpha-min-8':
                    return this.checkInputText(input, 8)
                case 'alpha-length-3':
                    return this.checkInputText(input, 3, 3)
                case 'alpha-length-4':
                    return this.checkInputText(input, 4, 4)
                case 'alpha-length-8':
                    return this.checkInputText(input, 8, 8)
                case 'text-min-3':
                    return this.checkInputText(input, 3, 0, { textOnly: true })
                case 'text-min-4':
                    return this.checkInputText(input, 4, 0, { textOnly: true })
                case 'text-min-8':
                    return this.checkInputText(input, 8, 0, { textOnly: true })
                case 'text-length-3':
                    return this.checkInputText(input, 3, 3, { textOnly: true })
                case 'text-length-4':
                    return this.checkInputText(input, 4, 4, { textOnly: true })
                case 'text-length-8':
                    return this.checkInputText(input, 8, 8, { textOnly: true })
                case 'number-min-3':
                    return this.checkInputText(input, 3, 0, { digitOnly: true })
                case 'number-min-4':
                    return this.checkInputText(input, 4, 0, { digitOnly: true })
                case 'number-min-8':
                    return this.checkInputText(input, 8, 0, { digitOnly: true })
                case 'number-length-3':
                    return this.checkInputText(input, 3, 3, { digitOnly: true })
                case 'number-length-4':
                    return this.checkInputText(input, 4, 4, { digitOnly: true })
                case 'number-length-8':
                    return this.checkInputText(input, 8, 8, { digitOnly: true })
                default:
                    return this.checkInputText(input)
            }
    }
}

FormStep.prototype.checkInputText = function (input, min, max, option) {
    var length = input.value.trim().length

    if (option) {
        if (option.digitOnly && !/^\d+$/.test(input.value)) {
            return false
        }

        if (option.textOnly && !/^[a-z|A-Z|ø|æ|å|ç|é|â|ê|î|ô|û|à|è|ì|ò|ù|ë|ï|ü|Ø|Æ|Å|Ç|É|Â|Ê|Î|Ô|Û|À|È|Ì|Ò|Ù|Ë|Ï|Ü|\-]+$/.test(input.value.replace(/ /g, ''))) {
            return false
        }
    }

    if (min && max && (min == max) && (length == min)) {
        return length ? true : false
    }

    if (min && (length < min)) {
        return false
    }

    if (max && (length > max)) {
        return false
    }

    return length ? true : false
}

FormStep.prototype.checkInputEmail = function (input) {
    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)
    //return input.value.indexOf('@') > -1
}

FormStep.prototype.submitBtn = function (evt) {
    return this.nextBtn[this.nextBtn.length - 1];
}

FormStep.prototype.urlToName = function (data) {
    var ucFirst = function (data) {
        return data.substring(0, 1).toUpperCase() + data.slice(1)
    }

    return ucFirst(data.replace(/\-/g, ' ').replace(/_/g, ' '))
}

FormStep.prototype.addInput = function (name, value) {
    var input = document.createElement('input')
    input.type = 'text'
    input.name = name
    input.value = value
    input.style.display = 'none'
    document.getElementById(this.id).appendChild(input)
}

FormStep.prototype.deleteInput = function (name) {
    var form = document.getElementById(this.id)
    if (form[name]) {
        form[name].remove()
    }
}