var hasError = false;
var password = $('[name="password"]');
var eyePath = 'public/share/Assets/';
var eyeOnSrc = eyePath + 'ic_eye_on.png';
var eyeOffSrc = eyePath + 'ic_eye_off.png';

function showPassword() {
    if (password.prop('type') == 'password') {
        password.prop('type', 'text');
        $('.eye').attr('src', eyeOnSrc);
    } else {
        password.prop('type', 'password');
        $('.eye').attr('src', eyeOffSrc);
    };
};
function hidePassword() {
    password.prop('type', 'password');
    $('.eye').attr('src', eyeOffSrc);
};

function visibleLabel(event) {
    //console.log(event.currentTarget);
    //console.log(event.relatedTarget);
    var inputFocus, inputBlur;
    inputFocus = $(event.currentTarget);
    inputFocus.parent().find('label').css('visibility', event.type == 'focusin' || event.type == 'click' || inputFocus.val() != '' ? 'visible' : 'hidden');
    if (event.relatedTarget && event.relatedTarget.tagName == 'INPUT') {
        inputBlur = $(event.relatedTarget);
        inputBlur.parent().find('label').css('visibility', inputBlur.val() == '' ? 'hidden' : 'visible');
    };
};
function isCapsLock(event) {
    var isCapsLock = false;
    var divError = $(event.target).parent().find('div[class*="error"]');
    if (event.tagName != 'INPUT' && $(event.target).attr('name') != 'otp-code' && event.type != 'focusout') {
        try {
            isCapsLock = event.originalEvent.getModifierState('CapsLock');
        } catch (e) {
            console.log(event.type);
            console.log(event.getModifierState('CapsLock'));
        };
    };
    divError.html(isCapsLock ? capsLockMessage : divError.html());
    return isCapsLock;
};
function isInvalid(event) {
    var elem = event.target ? $(event.target) : $(event);
    var divError = elem.parent().find('div[class*="error"]');
    var isOtpCode = elem.attr('name') == 'otp-code';
    var noValue = elem[0].validity.valueMissing;
    var isPatternMismatch = elem[0].validity.patternMismatch;

    if (noValue)
        divError.html(isOtpCode ? otpRequiredMessage : requiredMessage);
    else if (isPatternMismatch)
        divError.html(isOtpCode ? otpNumberMessage : hebrewMessage);
    else
        divError.html('');

    hasError = noValue || isPatternMismatch;
};
function inputFocus(event) {
    visibleLabel(event);
    //isCapsLock(event);
};
function inputBlur(event) {
    visibleLabel(event);
    isInvalid(event);
    inputKeyup(event);
};
function inputKeyup(event) {
    if (!isCapsLock(event))
        isInvalid(event);
    else
        return;
};
function documentCapsLock(event) {
    if (event.key === 'CapsLock' && !event.originalEvent.getModifierState('CapsLock')) {
        $("input").each(function () {
            isInvalid($(this)[0]);
        });
    };
};

function onSubmit() {
    var loginHasError = false;
    $('.form-container:not(:hidden) input').each(function (index) {
        isInvalid($(this)[0]);
        loginHasError = hasError ? hasError : loginHasError;
    });
	$('button').prop('disabled', !loginHasError).css('background-color', 'initial').css('border', '1px solid black');
    return !loginHasError;
}

$(function () {
    $('.eye').attr('src', eyeOffSrc);
    if ($(window).width() > 1024)
        $('.eye').hover(showPassword, hidePassword)
    else
        $('.eye').click(showPassword);

    $("input").on({
        click: isCapsLock,
        focusin: inputFocus,
        focusout: inputBlur,
        keyup: inputKeyup,
    });
    $(document).keyup(documentCapsLock);
});