{% extends 'participant_index.html' %}
{% block content %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div id="main-div" class="outer">
    <div class="container-fluid mat_grid">
        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Peter</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">got</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">three</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">large</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">desks</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Kathy</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sees</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">nine</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">small</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">chairs</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Lucy</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">bought</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">five</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">old</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">shoes</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Alan</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">gives</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">eight</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">dark</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">toys</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Rachel</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">sold</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">four</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">thin</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">spoons</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Barry</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">likes</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">six</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">green</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">mugs</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Steven</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">has</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">two</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">cheap</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">ships</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Thomas</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">kept</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">ten</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">pink</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">rings</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Hannah</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wins</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">twelve</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">red</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">tins</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-0" class="Btn Btn-outline-secondary mat-button">Nina</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-1" class="Btn Btn-outline-secondary mat-button">wants</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-2" class="Btn Btn-outline-secondary mat-button">some</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-3" class="Btn Btn-outline-secondary mat-button">big</button>
            </div>
            <div class="col-md">
                <button type="button" href="#" disabled id="mat-4" class="Btn Btn-outline-secondary mat-button">beds</button>
            </div>
        </div>
    </div>
    <div class="eeg_submit">
        <button type="button" href="#" disabled id="eeg-submit" class="Btn Btn-primary">Submit</button>
    </div>
    <div id="overlay">
        <div id="overlay_q">
            <p id="overlay_q1"></p>
            <p id="overlay_q2"></p>
        </div>
    </div> 
    <div id="instructions">
        <div class="card">
            <div class="card-body">
                <h2>Instructions</h2>
                <p>
                In this test, you will be presented with 20 sentences in
                backgrond noise.  Concentrate on all sentences, and try to
                remember the missing words (indicated with "_") for the
                following sentences:
                </p>
                <br>
                <h3 id="sentence_1" align='center'>Loading...</h3>
                <br>
                <h3 id="sentence_2" align='center'>Loading...</h3>
                <br>
                <p>When the sentences have all been played, you will be
                provided with a grid to fill in the blanks. Press the "submit"
                button when you have made your choice</p>
                <img src="/static/matrix_screen.png" class="center_matrix">
                <br>
                <button type="button" href="#" id="instr_continue" class="Btn Btn-primary">Continue</button>
            </div>
        </div> 
    </div>
</div>

<script>
    $(document).ready(function(){
        jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
        };
        // Initialise socketio with a namespace called "main"
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
        var loading = true;
        var part_ready = false;
        waitingDialog.show('Loading... Please wait');

        function displayInstructions() {
            $("#instructions").css("display", "table-cell");
            $("#instructions").fadeIn();
            waitingDialog.hide();
        }

        function hideInstructions() {
            $("#instructions").css("display", "none");
            $("#instructions").fadeOut();
            if(loading) {
                waitingDialog.show('Loading... Please wait');
            }
        }


        $('#instr_continue').click(function(event) {
            hideInstructions();
            part_ready = true;
            socket.emit("part_ready")
            on()
        });

        socket.on('display_instructions', function(msg) {
            $("#sentence_1").text(msg['sentence_1'])
            $("#sentence_2").text(msg['sentence_2'])
            $("#overlay_q1").text("Q1: "+msg['sentence_1'])
            $("#overlay_q2").text("Q2: "+msg['sentence_2'])
            displayInstructions();
        });

        socket.on('test_ready', function(msg) {
            $("#overlay_q1").text("Q1: "+msg['sentence_1'])
            $("#overlay_q2").text("Q2: "+msg['sentence_2'])
            loading = false;
            waitingDialog.hide();
        });

        var choice = Array(5).fill('');
        $('.mat-button').click(function(event) {
            choice[this.id.slice(-1)] = $(this).text();
            $('.mat-button#'+this.id).not(this).removeClass("active");
            $(this).addClass("active");
            console.log(choice);
            return false;
        });

        socket.on('stim_playing', function(msg) {
            $('.eeg_submit').find('input, textarea, button, select').attr('disabled', 'disabled');
            on()
        });

        socket.on('stim_done', function(msg) {
            $('.eeg_submit').find('input, textarea, button, select').removeAttr('disabled');
            off()
        });

        socket.on('set_matrix', function(msg) {
            var q = msg['data'];
            q = q.split(" ")
            for(i = 0; i < q.length; i++) {
                entry = q[i]
                var buttons = $(`.mat-button#mat-${i}`)
                if(entry == "_") {
                    buttons.removeAttr("disabled");
                    //buttons.removeClass("active");
                }
                else {
                    buttons.removeClass("active");
                    buttons.removeAttr("disabled");
                    buttons.not(`:contains(${entry})`).attr('disabled','disabled');
                    $(`.mat-button:contains(${entry})`).addClass("active");
                    $(`.mat-button:contains(${entry})`).attr("aria-pressed", "true");
                    choice[i] = entry.toUpperCase();
                }
            }
            $('#eeg-submit').prop("disabled", false);
        });

        function on() {
            $("#overlay").css("display", "table-cell");
            $("#overlay_q").css("display", "inline");
            $("#overlay").fadeIn();
            $("#overlay_q").fadeIn();
        }

        function off() {
            $("#overlay").fadeOut();
        } 

        $('#eeg-submit').click(function(event) {
            $('#eeg-submit').prop("disabled", true);
            if(choice.includes('')) {
                alert("Please select a word from each column");
                $('#eeg-submit').prop("disabled", false);
                return false;
            }
            else {
                $('.mat-button').removeClass("active");
                socket.emit('submit_eeg_response', {
                    resp: choice
                });
                choice = Array(5).fill('');
            }
        });

        socket.on('processing-complete', function(msg) {
            // Re-enable all inputs
            $('#main-div').find('input, textarea, button, select').removeAttr('disabled');
            alert("Matrix stimulus processing complete!")
            window.location.href = "/eeg/train/mat/complete";
        });
    });
</script>
{% endblock %}