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

    $('body').scrollspy({ target: '#main-nav', offset: 130 })

    // Initialize Console
    ConsoleLogHTML.connect(document.getElementById("console")); // Redirect log messages
    // ConsoleLogHTML.disconnect(); // Stop redirecting

    // Navbar click scroll
    $(".navbar a").on('click', function(event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();

            // Store hash
            var hash = this.hash;

            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            var offset = 0;
            if (hash === "#home")
            {
                offset = -100;
            }
            else {
                offset = -60;
            }
            $('html, body').animate({
                scrollTop: ($(hash).offset().top + offset)
            }, 1000, function(){
                // Add hash (#) to URL when done scrolling (default click behavior)
                // window.location.hash = hash;
            });
        }
    });

    $('#submission_info').hide();

    $('#ulysses16_download').hide();
    $('#att48_download').hide();
    $('#st70_download').hide();
    $('#a280_download').hide();
    $('#pcb442_download').hide();
    $('#dsj1000_download').hide();

    $('#ulysses16_submit').prop('disabled', true);
    $('#att48_submit').prop('disabled', true);
    $('#st70_submit').prop('disabled', true);
    $('#a280_submit').prop('disabled', true);
    $('#pcb442_submit').prop('disabled', true);
    $('#dsj1000_submit').prop('disabled', true);

    $( "#ulysses16_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('ulysses16');
            disable_btn($('#ulysses16_submit'));
        }
        
    });

    $( "#att48_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('att48');
            disable_btn($('#att48_submit'));
        }
    });

    $( "#st70_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('st70');
            disable_btn($('#st70_submit'));
        }
    });

    $( "#a280_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('a280');
            disable_btn($('#a280_submit'));
        }
    });

    $( "#pcb442_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('pcb442');
            disable_btn($('#pcb442_submit'));
        }
    });

    $( "#dsj1000_submit" ).click(function() {
        if (check_submit_info())
        {
            upload_leaderboard('dsj1000');
            disable_btn($('#dsj1000_submit'));
        }
    });

    //  User option
    var user_option = {};
    user_option.easy = true;
    user_option.medium = false;
    user_option.difficult = false;

    $('#inlineCheckbox1').change(function() {
        if (this.checked) {
            user_option.easy = true;
        } else {
            user_option.easy = false;
        }
        socket.emit('option', user_option);
    });

    $('#inlineCheckbox2').change(function() {
        if (this.checked) {
            user_option.medium = true;
        } else {
            user_option.medium = false;
        }
        socket.emit('option', user_option);
    });

    $('#inlineCheckbox3').change(function() {
        if (this.checked) {
            user_option.difficult = true;
        } else {
            user_option.difficult = false;
        }
        socket.emit('option', user_option);
    });

    // Initialize file uploader
    // initialize with defaults
    // $("#uploadfile").fileinput();

    // with plugin options
    $("#uploadfile").fileinput({
        // theme: "fa",
        'theme': 'fas',
        showUpload:false, 
        previewFileType:'py',
        maxFileCount: 1,
        allowedFileExtensions: ["py"]
    });
    $('#uploadfile').on('filecleared', function(event) {
        $('#btnSubmit').prop('disabled', true);
    });

    var url = window.location;

    // Upload File
    $('#uploadfile').on('fileloaded', function(e) 
    {
        if(e.target.files[0])
        {
            var fileName = e.target.files[0].name;
            if(fileName !== "my_model.py")
            {
                Snackbar.show({
                    text: 'Please only upload my_model.py.',
                    pos: 'bottom-right',
                    duration: 10000
                });
                $('#btnSubmit').prop('disabled', true);
            }
            else
            {
                $('#btnSubmit').prop('disabled', false);
            }
        }
    });

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

        // Hide submit
        $('#ulysses16_submit').prop('disabled', true);
        $('#att48_submit').prop('disabled', true);
        $('#st70_submit').prop('disabled', true);
        $('#a280_submit').prop('disabled', true);
        $('#pcb442_submit').prop('disabled', true);
        $('#dsj1000_submit').prop('disabled', true);

        $("#submit_name").val('');
        $("#submit_desc").val('');

        // Hide Download
        $('#ulysses16_download').hide();
        $('#att48_download').hide();
        $('#st70_download').hide();
        $('#a280_download').hide();
        $('#pcb442_download').hide();
        $('#dsj1000_download').hide();
        doAjax();
  });
})

function check_submit_info() {
    if(!$("#submit_name").val())
    {
        Snackbar.show({
            text: 'Please tell us your name.',
            pos: 'bottom-right',
            duration: 10000
        });
        $("#submit_name").focus();
        return false;
    }
    if(!$("#submit_desc").val())
    {
        Snackbar.show({
            text: 'You forget to leave some comment.',
            pos: 'bottom-right',
            duration: 10000
        });
        $("#submit_desc").focus();
        return false;
    }
    return true;
}

function disable_btn(btn) {
    btn.removeClass('btn-primary');
    btn.text('Submitted');
    btn.prop('disabled', true);
}

function enable_btn(btn) {
    btn.addClass('btn-primary');
    btn.text('Submit');
    btn.prop('disabled', false);
}

function upload_leaderboard(name) {
    obj = {}
    obj.name = name;
    data = {}
    if(name === 'ulysses16') {
        data.fitness = my_res.ulysses16.fitness;
        data.solution = my_res.ulysses16.solution;
    }
    else if (name === 'att48') {
        data.fitness = my_res.att48.fitness;
        data.solution = my_res.att48.solution;
    }
    else if (name === 'st70') {
        data.fitness = my_res.st70.fitness;
        data.solution = my_res.st70.solution;
    }
    else if (name === 'a280') {
        data.fitness = my_res.a280.fitness;
        data.solution = my_res.a280.solution;
    }
    else if (name === 'pcb442') {
        data.fitness = my_res.pcb442.fitness;
        data.solution = my_res.pcb442.solution;
    }
    else if (name === 'dsj1000') {
        data.fitness = my_res.dsj1000.fitness;
        data.solution = my_res.dsj1000.solution;
    }
    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);

    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) => {
                console.log('Emit build request')
                socket.emit('build', {});
                $("#uploadfile").fileinput('clear');

                $("#ulysses16_your").text("Running");
                $("#ulysses16_your").addClass('blink_me');

                $("#att48_your").text("Running");
                $("#att48_your").addClass('blink_me');

                $("#st70_your").text("Running");
                $("#st70_your").addClass('blink_me');

                $("#a280_your").text("Running");
                $("#a280_your").addClass('blink_me');

                $("#pcb442_your").text("Running");
                $("#pcb442_your").addClass('blink_me');

                $("#dsj1000_your").text("Running");
                $("#dsj1000_your").addClass('blink_me');

                $("#exampleModal").modal('show');
            },
            error: (e) => {
                // $("#listFiles").text(e.responseText);
            }
        });
    }
    else
    {
        alert('Failed to connect to server');
    }
}

function downloadRes(id, tsp, file) {
    // txt
    if(file == 0) {
        $.ajax({
            type: "GET",
            url: "/leaderboard",
            data: {
                "id": id,
                "tsp": tsp,
                "type": 'txt'
            },
            processData: false, //prevent jQuery from automatically transforming the data into a query string
            contentType: false,
            cache: false,
            success: (data) => {
                console.log(data)
            },
            error: (e) => {
                // $("#listFiles").text(e.responseText);
            }
        });
    }
    // json
    else {
        console.log(id, 'json')
    }
}