var socket = io.connect("http://localhost:8001");

socket.on("connect", function() {
    console.log("Connected.");
});

socket.on("disconnect", function() {
    window.location.href = "../login.html";
});

socket.on("connect_error", function() {
    window.location.href = "../login.html";
});

socket.on("recovery", function(data) {
    switch (data.type) {
        case 0:
            $(".recovery .question").fadeIn();
            $("div.question span.question").text(data.question);
        break;

        case 2:
            $(".recovery .question").hide();
            $(".recovery .password").show();
            sessionStorage.setItem("resetCode", data.resetCode);
        break;

        case 3:
            displayInfo(data.info);
        break;

        case 5:
            $("div.login").show();
            $("div.register").hide();
            $("div.recovery").hide();
            $("div.login input[name=username]").focus();
            localStorage.removeItem("resetCode");
            $("input[name=password]").css("border", "1px solid #eee").css("color", "#eee");
        break;
    }
});

socket.on("login", function(data) {
    if (data.result === 0) {
        localStorage.setItem("hasAccount", true);
        localStorage.setItem("isRemembering", isRemembering());

        if (isRemembering()) {
            localStorage.setItem("username", data.username);
        } else {
            sessionStorage.setItem("username", data.username);
        }

        sessionStorage.setItem("code", data.code);
        window.location.href = "http://localhost/index.html";
    } else {
        displayInfo(data.info);
    }
});

function getPasswordStrength(password) {
    let strength = 0,
        checks = {
            isSufficientLength: password.length >= 8,
            hasUppercase: password.match(new RegExp('[A-Z]')),
            hasLowercase: password.match(new RegExp('[a-z]')),
            hasNumber: password.match(new RegExp('[0-9]')),
            hasSpecialCharacter: password.match(new RegExp(/[-!@#$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/))
        };

    if (password !== "") {
        for (let check in checks) {
            if (checks[check]) strength += 1;
        }
    }

    return strength;
}

function checkPasswordStrength(password) {
    let strength = getPasswordStrength(password),
        field = $("input[name=password]"),
        minimumStrength = 3;

    if (strength >= minimumStrength) {
        // TODO
    }

    // Set border and color of password box to signify strength.
    switch (strength) {
        case 1: field.css("border", "1px solid #B64E4E").css("color", "#B64E4E"); break;
        case 2: field.css("border", "1px solid #B6864E").css("color", "#B6864E"); break;
        case 3: field.css("border", "1px solid #B6B44E").css("color", "#B6B44E"); break;
        case 4: field.css("border", "1px solid #57B64E").css("color", "#57B64E"); break;
        case 5: field.css("border", "1px solid #4E72B6").css("color", "#4E72B6"); break;

        default: field.css("border", "1px solid #eee").css("color", "#eee"); break;
    }
}

function isRemembering() {
    if ($("span.remember").text().includes("○")) return false;

    return true;
}

function displayInfo(message) {
    $("p.info").html(message);
    $("p.info").slideDown();
    setTimeout(function() {
        $("p.info").slideUp();
    }, 3000);
}

function hasAccount() {
    if (localStorage.getItem('hasAccount')) {
        $("div.login").show();
        $("div.register").hide();
        return true;
    } else {
        $("div.login").hide();
        $("div.register").show();
        return false;
    }

    return null;
}

function login() {
    if ($("div.login input[name=username]").val() !== "" &&
        $("div.login input[name=password]").val() !== "") {

        console.log("Attempting login, please wait.");
        socket.emit("login", {
            username: $("div.login input[name=username]").val(),
            password: $("div.login input[name=password]").val()
        });
    } else {
        displayInfo("Username or password cannot be empty.");
    }
}

function register() {
    if ($("div.register input[name=username]").val() !== "" &&
        $("div.register input[name=password]").val() !== "") {

        if ($("div.register input[name=password").val()
            === $("div.register input[name=repeatPassword]").val()) {

                socket.emit("register", {
                    username: $("div.register input[name=username]").val(),
                    password: $("div.register input[name=password]").val(),
                    confirm: $("div.register input[name=repeatPassword]").val(),
                    question: $("div.register input[name=question]").val(),
                    answer: $("div.register input[name=answer]").val()
                });

            } else {
                displayInfo("Passwords do not match.");
            }

    } else {
        displayInfo("Username or password cannot be empty.");
    }
}

hasAccount();

$(".register input[name=password]").keyup(function() {
    checkPasswordStrength($(this).val());
});

$("div.register input[name=answer]").keyup(function(e) {
    if (e.which == 13) register();
});

$(".login input[name=password]").keyup(function(e) {
    if (e.which == 13) login();
});

$("div.login button.login").click(function() {
    login();
});

$("div.register button.register").click(function() {
    register();
});

$(".double-button .login").click(function() {
    $("div.login").show();
    $("div.register").hide();
    $("div.recovery").hide();
    $("input[name=password]").css("border", "1px solid #eee").css("color", "#eee");
});

$(".double-button .register").click(function() {
    $("div.login").hide();
    $("div.register").show();
    $("div.recovery").hide();
    if ($(".register input[name=password]").val() !== "") {
        checkPasswordStrength($(".register input[name=password]").val());
    }
});

$("span.forgot").click(function() {
    $("div.login").hide();
    $("div.register").hide();
    $("div.recovery").show();
});

$(".get-question").click(function() {
    socket.emit("recovery",
    {type: 0, username: $("div.recovery input[name=username]").val()});
});

$(".submit-recovery").click(function() {
    socket.emit("recovery",
    {type: 1, username: $("div.recovery input[name=username]").val(),
     answer: $("div.recovery input[name=answer]").val()});
});

$(".set-password").click(function() {
    if ($("div.password input[name=password]").val() !== "") {
        socket.emit("recovery",
        {type: 4, username: $("div.recovery input[name=username]").val(),
         password: $("div.password input[name=password]").val(),
         resetCode: sessionStorage.getItem("resetCode")});
    } else {
        displayInfo("The password cannot be nothing.");
    }
});

$("span.remember").click(function() {
    if ($(this).text().includes("○")) {
        $(this).text("● Remember me?");
    } else {
        $(this).text("○ Remember me?");
    }
});