/// <reference path="../typings/index.d.ts"/>

function validate() {
    let userName = $('#username');
    let email = $('#email');
    let pass = $('#password');
    let comPass = $('#confirm-password');
    let company = $('#company');
    let companyNumber = $('#companyNumber');
    let submitBtn = $('#submit');
    submitBtn.attr('href', '#');

    let checked = true;
    let isPassOK = false;
    company.on('click', displayCompanyInfo);
    submitBtn.on('click', checkForm);
    userName.on('change', checkUserName);
    email.on('change', checkEmail);
    pass.on('change', checkPass);
    comPass.on('change', checkComPass);
    companyNumber.on('change', checkCompany);

    function checkCompany() {

        if (companyNumber.val().length === 4) {
            let num = Number(companyNumber.val());
            if (num >= 1000 && num <= 9999) {
                companyNumber.css('border-color', '');
            } else {
                companyNumber.css('border-color', 'red');
            }
        } else {
            companyNumber.css('border-color', 'red');
        }
    }

    function checkComPass() {
        if (isPassOK && (pass.val() == comPass.val())) {
            comPass.css('border-color', '');
        } else {
            comPass.css('border-color', 'red');
        }
    }

    function checkPass() {
        const regex = /^[a-z0-9_]{5,15}$/gi;
        if (pass.val().match(regex)) {
            isPassOK = true;
            pass.css('border-color', '');
        } else {
            isPassOK = false;
            pass.css('border-color', 'red');
        }
    }

    function checkEmail() {
        const regex = /^.*@.*[\.]+.*$/gi;
        email.val().match(regex) ?
            email.css('border-color', '') :
            email.css('border-color', 'red');
    }

    function checkUserName() {
        const regex = /^[a-z0-9]{3,20}$/gi;
        userName.val().match(regex) ?
            userName.css('border-color', '') :
            userName.css('border-color', 'red');
    }

    function checkForm(event) {
        event.preventDefault();
        if (document.getElementById('companyInfo').style.display == 'none') {
            normalCheck();
            let doc = Array.from(document.querySelectorAll('#userInfo input'));
            doc.every(x => x.style.borderColor == '') ?
                $('#valid').css('display', 'inline') :
                $('#valid').css('display', 'none');
        } else {
            normalCheck();
            checkCompany();
            let doc = Array.from(document.querySelectorAll('#registerForm input'));
            doc.every(x => x.style.borderColor == '') ?
                $('#valid').css('display', 'inline') :
                $('#valid').css('display', 'none');
        }
    }

    function normalCheck() {
        checkUserName();
        checkEmail();
        checkPass();
        checkComPass();
    }

    function displayCompanyInfo() {
        if (checked === true) {
            $('#companyInfo').css('display', 'inline');
            checked = false;
        } else {
            $('#companyInfo').css('display', 'none');
            checked = true;
        }
    }
}