requirejs.config({
    paths: {
        'socket.io': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io',
        'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min',
    },
    waitSeconds: 3
});

require(['jquery', 'socket.io'], function(jq, io) {

    function getDurationString(link_data) {
        // Print time diff in following format
        // 1s
        // 11s
        // 1:11s
        // 1:01s
        let duration = new Date((link_data["handoff"] - link_data["start"]) * 1000);
        let minutes = duration.getMinutes();
        let seconds = minutes > 0 ? (duration.getSeconds() > 9 ? duration.getSeconds() : "0" + duration.getSeconds()) : duration.getSeconds();
        let durationString = (minutes > 0 ? (minutes + "m") : "") + seconds + "s";
        return durationString;
    }


    $(function() {
        const socket = io('localhost:5000');
        socket.on('start_run', function(run_index) {});

        socket.on('link_start', function(link_data) {
            addLink(link_data["id"], link_data);
        });
        socket.on('link_handoff', function(link_data) {
            stop = new Date(link_data["handoff"] * 1000);
            let stopString = stop.getHours() + ":" + stop.getMinutes();

            $(`#link-${link_data["id"]} .link-status`).css("color", "green").removeClass("fa-question").addClass("fa-check");
            $(`#link-${link_data["id"]} .link-time`).text(`Time: ${getDurationString(link_data)}`);
        });

        socket.on('sync_current_run', function(run_data) {
            $('#current_run>div:gt(0)').remove();
            for (link_id in run_data["data"]) {
                addLink(link_id, run_data["data"][link_id]);
            }
        });
    });

    function addLink(link_id, link_data) {
        let stop = "handoff" in link_data;

        let time = (stop ? "Time: " + getDurationString(link_data) : "Running");
        let icon = (stop ? "check" : "question");
        let style = (stop ? "style=\"color:green\"" : "");
        let html = `
<div id='link-${link_id}' class="item">
  <div>${link_id}</div>
  <div class="link-time">${time}</div>
  <div>
    <i class="link-status fas fa-${icon}" ${style}></i>
  </div>
</div>
`;
        $('#current_run').append($(html));
    }
});