$(function () {

    let $liveModeLink = $('#live-mode-link');
    let $liveModeStatus = $('#live-mode-status');

    let isLive = false;

    let isLiveMode = function () {

        isLive = window.location.hash === '#live';

        $liveModeLink
            .toggleClass('btn-success text-white', isLive)
            .attr('href', isLive ? '#' : '#live');

        if (isLive) {
            $liveModeStatus.fadeIn();
        } else {
            $liveModeStatus.fadeOut();
        }

        
    };

    let isTeacher = window.location.hash === '#teacher';

    isLiveMode();

    $(window).on('hashchange', isLiveMode);

    var connection = new signalR.HubConnectionBuilder().withUrl("/codeHub").build();

    if (isTeacher) {
        //window.location.hash = '#';
        $liveModeLink.hide();
        $liveModeStatus.hide();
    }

    let $editors = $('.ace_editor');

    if (isTeacher) {

        $editors.each(function (i, e) {

            let editor = ace.edit(e);

            editor.session.on('change', function () {

                let user = 'ryan';
                let code = editor.getValue();

                connection.invoke("UpdateCode", user, i, code).catch(function (err) {
                    return console.error(err.toString());
                });
            });
        });
    }

    connection.on("ReceiveCode", function (user, index, code) {

        if (!isTeacher && isLive) {

            let editor = ace.edit($editors[index]);

            editor.session.setValue(code);
        }
    });

    connection.start().then(function () {
        //$('#send').prop('disabled', false);
    }).catch(function (err) {
        return console.error(err.toString());
    });

    
});