$(document).ready(function () {

    'use strict';

    let usernameError = true,
        emailError = true,
        passwordError = false,
        passConfirm = true;

    // Detect browser for css purpose
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        $('.form form label').addClass('fontSwitch');
    }

    // Label effect
    $('input').focus(function () {
        $(this).siblings('label').addClass('active');
    });

    $('input').change(function () {
        $(this).siblings('label').addClass('active');
    });

    // Form validation
    $('input').blur(function () {

        // User Name
        if ($(this).hasClass('name')) {
            if ($(this).val().length === 0) {
                $(this).siblings('span.error').text('Bitte gib deinen gewünschten Nutzernamen ein').fadeIn().parent('.form-group').addClass('hasError');
                usernameError = true;
            } else if ($(this).val().length > 1 && $(this).val().length <= 4) {
                $(this).siblings('span.error').text('Dein Name sollte länger als 4 Zeichen sein').fadeIn().parent('.form-group').addClass('hasError');
                usernameError = true;
            } else if($(this).val().match(/[^A-Za-z0-9._]/g)) {
                $(this).siblings('span.error').text('Dein Name darf ausschließlich Groß- und Kleinbuchstaben, Zahlen sowie Unterstriche und Punkte enthalten.').fadeIn().css('bottom', '-40px').parent('.form-group').addClass('hasError');
                usernameError = true;
            } else {
                $(this).siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
                usernameError = false;
            }
        }
        // Email
        if ($(this).hasClass('email')) {
            if ($(this).val().length == '') {
                $(this).siblings('span.error').text('Bitte gib deine E-Mail Adresse ein, damit wir dein Konto aktivieren können').fadeIn().parent('.form-group').addClass('hasError');
                emailError = true;
            } else {
                $(this).siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
                emailError = false;
            }
        }

        // PassWord
        if ($(this).hasClass('pass')) {
            var passErrText = "";
            var passOffset = -20;
            var containerBottomMargin = 0;
            passwordError = false;
            if ($(this).val().length < 8) {
                passErrText += 'Dein Passwort sollte min. 8 Zeichen lang sein<br>';
                passwordError = true;
                containerBottomMargin += 5;
            }
            if (!/[a-z]/.test($(this).val())) {
                passErrText += 'Dein Passwort sollte min. 1 Kleinbuchstaben enthalten<br>';
                passOffset -= 17;
                containerBottomMargin += 10;
                passwordError = true;
            }
            if (!/[A-Z]/.test($(this).val())) {
                passErrText += 'Dein Passwort sollte min. 1 Großbuchstaben enthalten<br>';
                passOffset -= 17;
                containerBottomMargin += 15;
                passwordError = true;
            }
            if (!/[0-9]/.test($(this).val())) {
                passErrText += 'Dein Passwort sollte min. 1 Zahl enthalten<br>';
                passOffset -= 17;
                containerBottomMargin += 20;
                passwordError = true;
            }
            if (!/[^A-Za-z0-9]/.test($(this).val())) {
                passErrText += 'Dein Passwort sollte min. 1 Sonderzeichen enthalten';
                passOffset -= 17;
                containerBottomMargin += 25;
                passwordError = true;
            }
            if (!passwordError) {
                $(this).siblings('span.error').css('bottom', '20px').html('').fadeOut().parent('.form-group').removeClass('hasError').css('margin-bottom', '5px');
                passwordError = false;
            } else {
                $(this).siblings('span.error').css('bottom', passOffset).html(passErrText).fadeIn().parent('.form-group').addClass('hasError').css('margin-bottom', containerBottomMargin);
            }
        }

        // PassWord confirmation
        if ($('.pass').val() !== $('.passConfirm').val()) {
            $('.passConfirm').siblings('.error').text('Passwörter stimmen nicht überein').fadeIn().parent('.form-group').addClass('hasError');
            passConfirm = false;
        } else {
            $('.passConfirm').siblings('.error').text('').fadeOut().parent('.form-group').removeClass('hasError');
            passConfirm = false;
        }

        // label effect
        if ($(this).val().length > 0) {
            $(this).siblings('label').addClass('active');
        } else {
            $(this).siblings('label').removeClass('active');
        }
    });


    // form switch
    $('a.switch').click(function (e) {
        $(this).toggleClass('active');
        e.preventDefault();

        if ($('a.switch').hasClass('active')) {
            $(this).parents('.form-piece').addClass('switched').siblings('.form-piece').removeClass('switched');
        } else {
            $(this).parents('.form-piece').removeClass('switched').siblings('.form-piece').addClass('switched');
        }
    });


    // Form submit
    $('form.signup-form').submit(function (event) {
        event.preventDefault();

        if (usernameError || emailError || passwordError || passConfirm) {
            $('.name, .email, .pass, .passConfirm').blur();
        } else {
            $('.signup, .login').addClass('switched');

            setTimeout(function () {
                $('.signup, .login').fadeOut();
            }, 700);
            setTimeout(function () {
                $('.brand').addClass('active');
            }, 300);
            setTimeout(function () {
                $('.heading').addClass('active');
            }, 600);
            setTimeout(function () {
                $('.loading-msg i').addClass('active');
            }, 900);
            setTimeout(function () {
                $('.form').fadeOut();
            }, 700);

            registerAccount($(".name").val(), $(".email").val(), $(".pass").val(), $(".passConfirm").val());
        }
    });

    // Password form submit
    $('form.password-form').submit(function (event) {
        event.preventDefault();

        if (passwordError || passConfirm) {
            $('.pass, .passConfirm').blur();
        } else {
            $('.signup').addClass('switched');

            setTimeout(function () {
                $('.signup, .login').hide();
            }, 700);
            setTimeout(function () {
                $('.brand').addClass('active');
            }, 300);
            setTimeout(function () {
                $('.heading').addClass('active');
            }, 600);
            setTimeout(function () {
                $('.loading-msg i').addClass('active');
            }, 900);
            setTimeout(function () {
                $('.form').hide();
            }, 700);

            var password = $('.pass').val(),
                passwordCon = $('.passConfirm').val(),
                url = window.location.href;

            console.log(url);

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    password: password,
                    passwordConfirm: passwordCon
                },
                success: function (data) {
                    console.log(data);
                    setTimeout(function () {
                        $('.loading-msg i').removeClass('active');
                    }, 1000);
                    setTimeout(function () {
                        $('.success-msg a').addClass('active');
                    }, 1550);
                    setTimeout(function () {
                        $('#messages').fadeOut().html(data.message).fadeIn().delay(100);
                    }, 1650);
                    if(data.type) {
                        setTimeout(function () {
                            $('.success-msg p').text("Dein Passwort wurde geändert! Du kannst dich nun damit einloggen.").addClass('active text-success');
                        }, 1200);
                    } else {
                        setTimeout(function () {
                            $('.success-msg p').text("Es ist ein unbekannter Fehler aufgetreten.").addClass('active text-danger');
                        }, 1200);
                    }
                },
                error: function (data) {
                    // TODO
                    console.log(data);
                }
            });
        }
    });

    // Reload page
    $('a.profile').on('click', function () {
        location.reload(true);
    });

    $('a.passwordForgot').on('click', function () {
        if ($('#loginname').val().length === 0) {
            $('#loginname').siblings('span.error').text('Bitte gib deinen Nutzernamen oder deine E-Mail-Adresse ein').fadeIn().parent('.form-group').addClass('hasError');
        } else {
            var loginname = $('#loginname').val();
            $.ajax({
                url: 'http://192.168.178.39/login/forget',
                method: 'POST',
                data: {
                    username: loginname
                },
                beforeSend: function () {
                    setTimeout(function () {
                        $('.signup, .login').hide();
                    }, 700);
                    setTimeout(function () {
                        $('.brand').addClass('active');
                    }, 300);
                    setTimeout(function () {
                        $('.heading').addClass('active');
                    }, 600);
                    setTimeout(function () {
                        $('.loading-msg i').addClass('active');
                    }, 900);
                    setTimeout(function () {
                        $('.form').hide();
                    }, 700);
                },
                success: function (data) {
                    setTimeout(function () {
                        $('.loading-msg i').removeClass('active');
                    }, 1000);
                    setTimeout(function () {
                        if (data.state) {
                            $('.success-msg p').addClass('text-success');
                        } else {
                            $('.success-msg p').addClass('text-danger');
                        }
                        $('.success-msg p').html(data.message).addClass('active');
                    }, 1200);
                },
                error: function (data) {
                    // TODO
                    console.log(data);
                }
            });
        }
    });
});

function registerAccount(username, email, password, passwordRepeat) {
    $.ajax({
        url: "http://192.168.178.39/login/register",
        method: "POST",
        data: {
            username: username,
            email: email,
            password: password,
            passwordRepeat: passwordRepeat
        },
        success: function (data) {
            console.log(data);
            setTimeout(function () {
                $('.loading-msg i').removeClass('active');
            }, 1000);

            if(data.state) {
                setTimeout(function () {
                    $('.success-msg p').text(data.endMessage).addClass('active');
                    $('.success-msg a').show();
                }, 1200);

                setTimeout(function () {
                    $('.success-msg a').addClass('active');
                }, 1550);
            } else {
                setTimeout(() => {
                    $('.signup, .login').fadeIn();
                    $('.form').fadeIn();
                }, 2200);
                setTimeout(() => {
                    $('.signup').removeClass('switched');
                }, 2550);

                for(let error of data.errors) {
                    switch(error) {
                        case 'username':
                            $('.name').parent().addClass('hasError');
                            break;
                        case 'email':
                            $('.email').parent().addClass('hasError');
                            break;
                        case 'password':
                            $('.pass').parent().addClass('hasError');
                            break;
                        case 'passwordRepeat':
                            $('.passConfirm').parent().addClass('hasError');
                            break;
                    }
                }
            }

            setTimeout(function () {
                let messages = '';
                for(message of data.messages) {
                    messages += `<div class="alert alert-${message.type}" role="alert">
<b>${message.headline}</b> ${message.body}
</div>`
                }
                $('#messages').fadeOut().html(messages).fadeIn().delay(100);
            }, 1650);
        },
        error: function (data) {
            console.log(data);
            const registerResult = {
                state: false,
                messages: [],
                endMessage: 'Leider ist ein unbekannter Fehler aufgetreten',
                errors: []
            };

            setTimeout(function () {
                $('.loading-msg i').removeClass('active');
            }, 100);
            setTimeout(function () {
                $('.success-msg p').text(registerResult.endMessage).addClass('active');
            }, 200);
            setTimeout(function () {
                $('.success-msg a').addClass('active');
            }, 550);
            setTimeout(function () {
                // $('#messages').fadeOut().delay(100).html(registerResult.message).fadeIn();
            }, 700);
        }
    });
}