{% extends "otree/BaseAdmin.html" %}
{% load otree_tags floppyforms %}

{% block title %}
    Room: {{ room.display_name }}
{% endblock %}

{% block content %}

    <h3>Create a new session</h3>

    {% include "otree/includes/CreateSessionForm.html" %}

    <hr/>
    <h3>Participants Ready: <span id="present_count"></span></h3>

    {% if room.has_participant_labels %}
    <button class="btn" type="button" data-toggle="collapse" data-target="#participants_waiting_list">
        Expand/Collapse
    </button>

    <div id="participants_waiting_list" class="collapse">
        {% for participant_label in room.get_participant_labels %}
            <span style="display: none" class="label label-success present-participant-label" id="present-participant-label-{{ participant_label|escape }}">
                {{ participant_label }}
            </span>
        {% endfor %}
    </div>

    {% endif %}

    {% if room.has_participant_labels %}
    {# if there's no participant labels, there's no concept of participants absent #}
    <h3>Participants Not Present: <span id="absent_count"></span></h3>
    <button class="btn" type="button" data-toggle="collapse" data-target="#participants_not_waiting_list">
        Expand/Collapse
    </button>

    <div id="participants_not_waiting_list" class="collapse">
        {% for participant_label in room.get_participant_labels %}
            <span class="label label-default absent-participant-label count-this" id="absent-participant-label-{{ participant_label|escape }}">{{ participant_label }}</span>
        {% endfor %}
    </div>

    {% endif %}

    <hr/>


    {% include "otree/includes/RoomParticipantLinks.html" %}

{% endblock %}

{% block internal_styles %}
    {{ block.super }}

    <style>
    .label {
        margin-left: 5px;
    }
    </style>

{% endblock %}


{% block internal_scripts %}
    {{ block.super }}
    <!-- this is an HTML file rather than JavaScript static file because context variables need to be passed to it -->
<script type="text/javascript">
$(document).ready(function () {

    calcCountsFromDOM();

    var has_participant_labels = {{ room.has_participant_labels|yesno:"true,false" }};
    var no_labels_present_count = 0;

    var socket;
    initWebSocket();

    function getStaleParticipantVisits() {
        var args = {
            type: "GET",
            url: '{% url "stale_room_visits" room.name %}',
            success: function(data) {
                participant_labels = data.participant_labels;
                if (participant_labels.length > 0) {
                    for (var i = 0; i < participant_labels.length; i++) {
                        setParticipantPresence(participant_labels[i], false);
                    }
                    calcCountsFromDOM();
                }
            }
        };
        $.ajax(args);
    }

    function getActiveParticipantCount() {
        var args = {
            type: "GET",
            url: '{% url "active_room_participants_count" room.name %}',
            success: function(data) {
                no_labels_present_count = data.count;
                $('#present_count').text(no_labels_present_count);
            }
        };
        $.ajax(args);
    }

    var SECOND = 1000;
    if (has_participant_labels) {
        window.setInterval(getStaleParticipantVisits, 4 * SECOND);
    } else {
        window.setInterval(getActiveParticipantCount, 4 * SECOND);
    }


    function setParticipantPresence(participant_label, is_present) {
        var pres_el = $('#present-participant-label-' + participant_label);
        var abs_el = $('#absent-participant-label-' + participant_label);

        if (is_present) {
            show_el = pres_el;
            hide_el = abs_el;
        } else {
            show_el = abs_el;
            hide_el = pres_el;
        }

        show_el.show();
        show_el.addClass('count-this');

        hide_el.hide();
        hide_el.removeClass('count-this');

    }

    function calcCountsFromDOM() {
        var present_count = $('.present-participant-label.count-this').length;
        var absent_count = $('.absent-participant-label.count-this').length;
        $('#present_count').text(present_count);
        $('#absent_count').text(absent_count);
    }

    function initWebSocket() {

        console.log('hello');

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + "{{ view.socket_url|safe }}";
        socket = new ReconnectingWebSocket(ws_path);
        socket.onmessage = function (e) {
            var data = JSON.parse(e.data);

            if (data.error) {
                $("#error-notice").show();
                return;
            }

            var status = data["status"];
            if (has_participant_labels) {
                if (status == "load_participant_lists") {
                    participant_labels = data["participants_present"];
                    for (var i = 0; i < participant_labels.length; i++) {
                        setParticipantPresence(participant_labels[i], true);
                    }
                }
                if (status == "add_participant") {
                    setParticipantPresence(data["participant"], true);

                }
                if (status == "remove_participant") {
                    setParticipantPresence(data["participant"], false);
                }
                calcCountsFromDOM();
            } else {
                if (status == "load_participant_lists") {
                    participant_labels = data["participants_present"];
                    no_labels_present_count = participant_labels.length;
                }
                if (status == "add_participant") {
                    no_labels_present_count++;
                }
                if (status == "remove_participant") {
                    no_labels_present_count--;
                }
                $('#present_count').text(no_labels_present_count);
            }

        };
        socket.onopen = function () {
            console.log('WebSocket connected');
        };
        socket.onclose = function () {
            console.log('WebSocket disconnected');
        };
    }

});
</script>
{% endblock %}