(function( $ ) {
    'use strict';

    // QSS Login
    let form = $('.login-form'),
        loader = $('.loader-wrapper'),
        message = $('.message'),
        logout = $('.button-logout'),
        token = sessionStorage.getItem('token');

    // Check if token exists
    if (token) {
        form.hide();
        message.html('You are still logged in successfully, Q person!');
        logout.fadeIn();
    }

    form.submit(function(e) {
        e.preventDefault();
        let email = $('#email').val(),
            password = $('#password').val();

        // validate user input
        if (!email || !password) {
            console.error('Email and password are required.');
            message.html('Please enter your email and password.');
            return;
        }

        $.ajax({
            url: 'https://symfony-skeleton.q-tests.com/api/v2/token',
            type: 'POST',
            data: JSON.stringify({ email: email, password: password }),
            dataType: 'json',
            contentType: 'application/json',
            beforeSend: function(){
                loader.fadeIn();
            },
            success: function(response) {
                // store token in session for one day
                let token = response.token,
                    expiresAt = new Date().getTime() + (24 * 60 * 60 * 1000);
                sessionStorage.setItem('token', token);
                sessionStorage.setItem('expiresAt', expiresAt);
                loader.fadeOut();
                form.hide();
                message.html('Logged in successful, welcome Q person!');
                logout.fadeIn();
            },
            error: function(xhr, status, error) {
                console.error(error);
                loader.fadeOut();
                message.html('Connection failed, try different credentials.');
            }
        });
    });

    logout.click(function() {
        sessionStorage.removeItem('token');
        message.html('You have been logged out.');
        logout.hide();
        form.fadeIn();
        setTimeout(function() {
            message.html('');
        }, 3000);
    });

})( jQuery );