// warn the user when leaving
window.onbeforeunload = function(){
    return "Make sure to save your graph locally before leaving";
};

var my_res = {};
my_res.ulysses16 = {}
my_res.att48 = {}
my_res.st70 = {}
my_res.a280 = {}
my_res.pcb442 = {}
my_res.dsj1000 = {}

my_res.ulysses16.fitness = -1;
my_res.att48.fitness = -1;
my_res.st70.fitness = -1;
my_res.a280.fitness = -1;
my_res.pcb442.fitness = -1;
my_res.dsj1000.fitness = -1;

var socket = io();

socket.on('connect', () => {
    $("#status").removeClass('badge-secondary');
    $("#status").addClass('badge-primary');
    window.id = socket.id
    console.log('Session Id: ', socket.id); // an alphanumeric id...
});

socket.on('disconnect', () => {
    $("#status").removeClass('badge-primary');
    $("#status").addClass('badge-secondary');
    $("#status").text('offline');
});


socket.on('users_count', (clients) => {
    $("#status").text(clients + ' online');
});

socket.on('start', () => {
    console.log('Building start');
});

socket.on('leaderboard', (obj) => {
    console.log(obj);
    $(".leaderboard-table").find("tr:not(:first):not(:last)").remove();
    if(obj.ulysses16.length != 0) {
        obj.ulysses16.forEach(element => {
            $('#ulysses16-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
        $('#ulysses16_best').text(obj.ulysses16[0].fitness);
    }
    if(obj.att48.length != 0 ) {
        obj.att48.forEach(element => {
            $('#att48-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
        $('#att48_best').text(obj.att48[0].fitness);
    }

    if (obj.st70.length != 0) {
        obj.st70.forEach(element => {
            $('#st70-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
        $('#st70_best').text(obj.st70[0].fitness);
    }

    if (obj.a280.length != 0) {
        obj.a280.forEach(element => {
            $('#a280-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
        $('#a280_best').text(obj.a280[0].fitness);
    }

    if(obj.pcb442.length != 0) {
        $('#pcb442_best').text(obj.pcb442[0].fitness);
        obj.pcb442.forEach(element => {
            $('#pcb442-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
    }

    if(obj.dsj1000.length != 0) {
        obj.dsj1000.forEach(element => {
            $('#dsj1000-last').before('<tr id=""><td>' + element.name + '</td><td>' + element.fitness + '</td><td>' + element.desc + '</td></tr>')
        });
        $('#dsj1000_best').text(obj.dsj1000[0].fitness);
    }

});

socket.on('update', (msg) => {
    // var msg = msg.replace(/\x1b[[0-9;]*[a-zA-Z]/g, '');
    msg = msg.replace(/[^\x20-\x7E]/g, '')
    if(msg[1] == '[') {
        msg = msg.substring(1);
    }
    console.log(msg);
});

socket.on('result', (res) => {
    // console.log(res)
    res = JSON.parse(res);
    $('#submission_info').show();
    res.forEach(e => {
        if(e.name === "ulysses16.txt") {
            my_res.ulysses16.fitness = e.fitness
            $("#ulysses16_your").text(e.fitness);
            $('#ulysses16_submit').show();
        }
        if(e.name === "att48.txt") {
            my_res.att48.fitness = e.fitness
            $("#att48_your").text(e.fitness);
            $('#att48_submit').show();
        }
        if(e.name === "st70.txt") {
            my_res.st70.fitness = e.fitness
            $("#st70_your").text(e.fitness)
            $('#st70_submit').show();
        }
        if(e.name === "a280.txt") {
            my_res.a280.fitness = e.fitness
            $("#a280_your").text(e.fitness)
            $('#a280_submit').show();
        }
        if(e.name === "pcb442.txt") {
            my_res.pcb442.fitness = e.fitness
            $("#pcb442_your").text(e.fitness)
            $('#pcb442_submit').show();
        }
        if(e.name === "dsj1000.txt") {
            my_res.dsj1000.fitness = e.fitness
            $("#dsj1000_your").text(e.fitness)
            $('#dsj1000_submit').show();
        }
    });
});

$(document).ready( () => {
    $("#btnSubmit").click((event) => {
        //stop submit the form, we will post it manually.
        event.preventDefault();
        doAjax();
    });

    $('#uploadfile').change(function(e){
        if(e.target.files[0])
        {
            var fileName = e.target.files[0].name;
            if(fileName !== "my_model.py")
            {
                alert('Please upload my_model.py');
                $('#btnSubmit').prop('disabled', true);
            }
            else
            {
                $('#btnSubmit').prop('disabled', false);
            }
        }
    });
});

function upload_loaderboard(name) {
    obj = {}
    obj.name = name;
    data = {}
    if(name === 'ulysses16') {
        data.fitness = my_res.ulysses16.fitness;
    }
    else if (name === 'att48') {
        data.fitness = my_res.att48.fitness;
    }
    else if (name === 'st70') {
        data.fitness = my_res.st70.fitness;
    }
    else if (name === 'a280') {
        data.fitness = my_res.a280.fitness;
    }
    else if (name === 'pcb442') {
        data.fitness = my_res.pcb442.fitness;
    }
    else if (name === 'dsj1000') {
        data.fitness = my_res.dsj1000.fitness;
    }
    data.name = $('#submit_name').val();
    data.desc = $('#submit_desc').val()
    data.time = Date.now()
    obj.data = data;
    socket.emit('submit', obj);
}

function doAjax() {
 
    // Get form
    var form = $('#fileUploadForm')[0];

    var data = new FormData(form);
    var file = data.get('uploadfile');

    var renameFile =new File([file], window.id + '.py' ,{type:file.type});
    var formdata = new FormData();
    formdata.append('uploadfile', renameFile);
    // console.log(formdata.get('uploadfile'))
    if(window.id) {
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/files/upload",
            data: formdata,
            processData: false, //prevent jQuery from automatically transforming the data into a query string
            contentType: false,
            cache: false,
            success: (data) => {
                // $("#listFiles").text(data);
                console.log('Emit build request')
                socket.emit('build', {});
            },
            error: (e) => {
                $("#listFiles").text(e.responseText);
            }
        });
    }
    else
    {
        alert('Failed to connect to server');
    }
}