$(document).ready(function () {
    let passwordVisibilityIcon = $('span#password-visibility');
    let passwordField = $('input#password');

    mp.trigger('CEF:Login_RequestPlayerName');

    passwordVisibilityIcon.mouseenter(togglePasswordVisibility);
    passwordVisibilityIcon.mouseleave(togglePasswordVisibility);

    function togglePasswordVisibility() {
        if (passwordVisibilityIcon.hasClass('hidden')) {
            passwordVisibilityIcon.removeClass('hidden');
            passwordField.attr("type", "text");
        } else {
            passwordVisibilityIcon.addClass('hidden');
            passwordField.attr("type", "password");
        }
    }

    $('form.login').submit(function (e) {
        e.preventDefault();
        mp.trigger("CEF:Login_LoginRequest", passwordField.val())
    });

    $('form.register').submit(function (e) {
        e.preventDefault();
        mp.trigger("CEF:Login_RegisterRequest", passwordField.val())
    });
});

function customizeNamePrompt(name) {
    $('main h2').html("Willkommen auf Life of German!");
    $('main p').html('Wir freuen uns, sehr dass Du auf unseren Server gestoßen bist!<br>Leider hast Du noch keinen eigenen Namen im RAGE:MP-Clienten festgelegt.<br><br>Bevor Du auf unserem Server starten kannst, musst Du das nachholen. Befolge hierzu die folgenden Schritte:<br><ol style="margin-top: .25em"><li>Spiel schließen (F1 drücken und das Fenster schließen)</li><li>Rockstar Games Launcher schließen</li><li>RAGE:MP-Client starten</li><li>Oben rechts auf das Symbol für Einstellungen klicken</li><li>Unter dem Punkt "Allgemein" > "Name wählen" kannst Du nun einen eigenen Namen festlegen</li><li>Jetzt kannst Du auf unserem Server spielen</li></ol>Solltest Du weitere Hilfe benötigen, kannst Du uns im TeamSpeak über die RAGE:MP Support-Anmeldung kontaktieren: <strong>ts.log.ac</strong>');
    $('main form').remove();
}

function setPlayerName(name) {
    if (name.toLowerCase().startsWith("weirdnewbie")) {
        customizeNamePrompt();
        return false;
    }

    $('span#name').html(name);
}

function showError(error) {
    var errorText = $("#alert");
    errorText.removeClass("hidden");
    errorText.text(error);
}

function disableLightMode() {
    $("body").removeClass("light");
}