const PASSWORD_VALIDATIONS = {
    oneUpper: '[A-Z]{1,}',
    oneLower: '[a-z]{1,}',
    oneNumber: '[0-9]{1,}',
    oneSymbol: '(\\-|\\_|\\.|\\@){1,}',
    min8: '([0-9]|[a-z]|[A-Z]|\\-|\\_|\\.|\\@){8,}'
};
let passedValidations = {
    oneUpper: false,
    oneLower: false,
    oneNumber: false,
    oneSymbol: false,
    min8: false
};

//password input listener
[PASSWORD INPUT].on('keyup', validateNewPassword);



function validateNewPassword(){
    event.preventDefault();
    event.stopPropagation();

    const VAL = 0;//password input
    const $PROGRESS     = 0;//progress bar div
    const TOTAL_RULES   = Object.keys(passedValidations).length;

    const PARENT_WIDTH_IN_PX  = $PROGRESS.parent().css('width').replace('px', '');
    const CURRENT_WIDTH_IN_PX = $PROGRESS.css('width').replace('px', '');

    const INCREASE_PERCENT  = PARENT_WIDTH_IN_PX / TOTAL_RULES;
    const INCREASED_WIDTH   = parseFloat(CURRENT_WIDTH_IN_PX) + parseFloat(INCREASE_PERCENT);
    const NEW_WIDTH         = VAL === ''
                              ? 0
                              : INCREASED_WIDTH > PARENT_WIDTH_IN_PX
                                ? PARENT_WIDTH_IN_PX
                                : INCREASED_WIDTH;

    let exp = null;
    let color = getPasswordProgressColor(CURRENT_WIDTH_IN_PX, PARENT_WIDTH_IN_PX);

    for(let rule in PASSWORD_VALIDATIONS){
        exp = new RegExp(PASSWORD_VALIDATIONS[rule]);

        if(exp.test(VAL)){
            if(!passedValidations[rule]){
                passedValidations[rule] = true;
                $PROGRESS.css({
                    backgroundColor: color,
                    width: NEW_WIDTH+ 'px'
                });
            }
        }else{
            if(passedValidations[rule]){
                passedValidations[rule] = false;
                let width = parseFloat(CURRENT_WIDTH_IN_PX) - parseFloat(INCREASE_PERCENT);
                const REDUCED_WIDTH = width < 0 ? 0 : width;
                $PROGRESS.css({
                    backgroundColor: color,
                    width: REDUCED_WIDTH+ 'px'
                });
            }
        }
    }
}

function getPasswordProgressColor(currentWidth, parentWidth){
    const HALF = parentWidth / 2;
    if(currentWidth < HALF){
        return 'rgb(255, 0, 0)';
    }else if(currentWidth > HALF){
        return 'rgb(0, 250, 0)';
    }else{
        return 'rgb(255, 110, 0)';
    }
}