$( 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 })

    $('#fullpage').fullpage({
        // anchors: ['underPage', 'gradPage', 'phdPage'],
        sectionsColor: ['#ffffff', '#f8f8f8'],
        autoScrolling: false,
        css3: true,
        fitToSection: false,
        afterLoad: function(anchorLink, index) {
            // history.pushState(null, null, "");
            // console.log(anchorLink);
        }
    });

    // 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_submit').hide();
    $('#att48_submit').hide();
    $('#st70_submit').hide();
    $('#a280_submit').hide();
    $('#pcb442_submit').hide();
    $('#dsj1000_submit').hide();

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

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

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

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

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

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

    // 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"]
    });

    var url = window.location;

    // GET REQUEST
    $("#btnGetFiles").click( (event) => {
        event.preventDefault();
        ajaxGet();
    });

    // DO GET
    function ajaxGet(){
        $.ajax({
            type : "GET",
            url : "/api/files/getall",
            success: (data) => {
                // clear old data
                $("#listFiles").html("");
                // render list of files
                $("#listFiles").append('<ul>');
                $.each(data, (index, filename) => {
                    $("#listFiles").append('<li><a href=' + url + 'api/files/' + filename +'>' + filename + '</a></li>');
                });
                $("#listFiles").append('</ul>');
            },
            error : (err) => {
                $("#listFiles").html(err.responseText);
            }
        });    
    }

    // Upload File
    $('#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);
            }
        }
    });

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

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

function enable_btn(btn) {
    btn.show();
    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;
    }
    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);

    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', {});
            },
            error: (e) => {
                $("#listFiles").text(e.responseText);
            }
        });
    }
    else
    {
        alert('Failed to connect to server');
    }
}