{% extends "otree/Page.html" %}
{% load otree static %}

{% block title %}
    <span style="float: left">
        <h6 class="inline bigMargin">Round: {{ player.get_round }}</h6>
        <h6 class="inline bigMargin">Your Role: {{ player.role }}</h6>
        <h6 class="inline bigMargin">Your ID: {{ player.participant.id_in_session }}</h6>
        <h6 id="timer" class="inline bigMargin"></h6>
        <h6 class="inline">Baseline Earnings in this Round = {{ Constants.income }}</h6>
    </span>

    <span style="float: right">
        <button type="button" id="stop" class="btn btn-primary btn-sm"
                onclick='sendMessage({{ Constants.end_negotiations_signal|json }}, null, null)'>End Negotiations</button>
    </span>

    <div style="float: none; clear:both;"></div>

{% endblock %}

{% block global_styles  %}
    <style>
        hr {
            display: block;
            margin-top: 5;
            margin-bottom: 5;
            margin-left: auto;
            margin-right: auto;
            border-style: inset;
            border-width: 2px;
        }
        .noStyle {
            padding: 0;
            list-style: none;
            margin-bottom: 0px;
        }
        .trimmed {
            padding: 0;
            margin: 0;
        }
        .inline {
            display: inline-block;
        }
        .smallMargin {
            margin-right: 4px;
        }
        .bigMargin {
            margin-right: 10px;
        }
        .largeMargin {
            margin-right: 25px;
        }
        .topVerticalAlign {
            vertical-align: top;
        }
        .verticalWithPadding {
            vertical-align: top;
            padding: 50px
        }
        .textAlign {
            text-align: center;
        }
        .width {
            width: 50px;
        }
        .fullWidth {
            width: 100%;
        }
        .floatLeft {
            float: left;
        }
        .topMargin {
            margin-top: 25px;
        }
        table, th, td {
            border: 1px solid black;
        }
        .FixedHeightContainer {
            height: 224px;
        }
        .Content {
            height:224px;
            overflow:auto;
        }
    </style>
{% endblock %}

{% block global_scripts  %}
    <script type="text/javascript" src='{% static "HTMLWidgets/Widgets.js" %}'></script>
    <script>
        var socket;
        var myChannel = {{ player.get_channel|json }};
        var myID = {{ player.participant.id_in_session }};
        var myGroupID = {{ group.id }};
        var offerFlag = {{ Constants.offer_signal|json }};
        var replyFlag = {{ Constants.acknowledgment_signal|json }};
        var backupFlag = {{ Constants.backup_request_signal|json }};
        var terminateFlag = {{ Constants.end_negotiations_signal|json }};
        var reloadFlag = {{ Constants.backup_reload_signal|json }};
        var roundData = {
            sourceID: myID,
            sourceChannel: myChannel,
            sourceGroup: myGroupID,
            offersMade: 0,
            acceptedOffersAmount: 0,
            acceptedOffers: 0,
            budget: {{ group.tenant_balance }},
            offerInTransit: null,
            acknowledgment: null,
            backupStatus: backupFlag,
            time: 1000,
            offersCurrentlyPending: 0
        };
        var reloadable = true;
        var terminated = false;
        var start = new Date({{ player.timestamp|json }});
        var mins;
        var secs;

        var x = setInterval(function() {
            var now = new Date();
            var secsElapsed = Math.floor((now - start)/1000);
            var timeLeft = {{ timeout }} - secsElapsed;

            if (timeLeft < 1) {
                clearInterval(x);
                timeLeft = 0;
                if(terminated) {
                    submitPage();
                }
                alert('Time has run out for this round. Please finalize your decision now.');
            }

            //console.log('Time Elapsed: ' + secsElapsed + ' Time Left: ' + timeLeft);
            mins = Math.floor(timeLeft/60);
            secs = timeLeft % 60;

            var secs_wrapper = secs;

            if(secs < 10)
                secs_wrapper = '0' + secs;

            $('#timer').html('Remaining Time: ' + mins + ':' + secs_wrapper);

            roundData.time = timeLeft;

        }, 1000);

        function disableTermination() {
            $('#stop').attr('disabled', true);
        }

        function submitPage() {
            $('#submitPage').trigger('click');
        }

        function startSession() {
            loadSession();
            styleScreens();
        }

        function defaultReload() {
            if({{ player.submit_form|json }}) {
                submitPage();
                return true;
            } else if({{ player.negotiations_terminated|json }}) {
                terminateNegotiations();
                return true;
            }
            return false;
        }

        function sessionTerminate(time) {
            console.log('Terminating Negotiations');
            terminated = true;
            terminateNegotiations();
            if(time < 1) {
                submitPage();
            }
        }

        function socketInitializer() {
            var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
            socket = new WebSocket(ws_scheme + '://' + window.location.host + "/bargaining/group{{group.id}}");

            // Handle any errors that occur.
            socket.onerror = function (error) {
                console.log('WebSocket Error: ' + error);
            };

            // Show a connected message when the WebSocket is opened.
            socket.onopen = function (event) {
                console.log('Socket Connected');
                if({{ player.has_backup_data|json }}) {
                    sendMessage(reloadFlag, null, myChannel);
                } else {
                    defaultReload();
                }
            };

            // Show a disconnected message when the WebSocket is closed.
            socket.onclose = function (event) {
                console.log('Socket Disconnected');
                socketInitializer();
            };

            // Handle messages sent by the server.
            socket.onmessage = function (event) {
                var obj = jQuery.parseJSON(event.data);
                console.log(obj);
                if(obj.sourceGroup != myGroupID)
                    return null;
                if(obj.hasOwnProperty('submit')){
                    submitPage();
                } else if(obj.hasOwnProperty('reset')) {
                    resetScreen(obj.destinationChannel);
                } else if(obj.hasOwnProperty('terminate')) {
                    sessionTerminate(+obj.time);
                } else if(obj.hasOwnProperty('BackupData') && obj.ID == myID && reloadable) {
                    reloadBackup(obj);
                    console.log(`Reload: ${obj.Progress}%`);
                    if(+obj.Progress == 100) {
                        reloadable = false;
                    }
                    if({{ group.terminate|json }})
                        sessionTerminate(+obj.time);
                } else {
                    updateBudget(+obj.budget);

                    if(obj.destinationChannel != myChannel || obj.backupStatus == reloadFlag)
                        return null;

                    if(obj.p2p == 'offer') {
                        openOffer(obj.sourceChannel, +obj.offerInTransit)
                    } else if(obj.p2p == 'acknowledgment') {
                        openResponse(obj.sourceChannel, obj.acknowledgment);
                    }
                    reloadable = true;
                    screenUpdate();
                }
            };
        }

        function sendMessage(direction, package, channel) {
            roundData.destinationChannel = channel;
            roundData.p2p = direction;
            roundData.catalogueCode = myChannel == {{ Constants.tenant_channel|json }} ? channel : myChannel;
            roundData.backupStatus = null;
            console.log('Starting Message: ' + direction + " " + package + " " + channel);
            var amountValidation = direction == offerFlag ? +package >= 0 && package != '' && +package%1 == 0 : true;

            if(socket.readyState === socket.OPEN) {
                if(direction == terminateFlag) {
                    if(confirm('Are you sure you want to end negotiations?')) {
                        roundData.terminate = true;
                        reloadable = true;
                        socket.send(JSON.stringify(roundData));
                    }
                } else if(direction == reloadFlag) {
                    console.log('Reloading backup');
                    roundData.backupStatus = reloadFlag;
                    reloadable = true;
                    socket.send(JSON.stringify(roundData));
                    clearData();
                } else if (amountValidation) {
                    if(direction == offerFlag) {
                        if(prepareOffer(channel, +package)) {
                            console.log('Offer made');
                        } else {
                            console.log('Insufficient Funds');
                            return null;
                        }
                    } else if(direction == replyFlag) {
                        prepareResponse(channel, package);
                        console.log('Response sent');
                    }
                    screenUpdate();
                    reloadable = true;
                    socket.send(JSON.stringify(roundData));
                } else {
                    console.log('Validation failed');
                    resetScreen(channel);
                }
            } else {
                resetScreen(channel);
                console.log('Not Ready: '+direction+' '+package+' '+channel);
            }
        }

        window.onload = function () {
            startSession();
            socketInitializer();
            var closeForm = `<button id="submitPage" onclick="console.log('Clicked');" hidden></button>`
            $('#form').append(closeForm);

            $('form input').on('keypress', function(e) {
                return e.which !== 13;
            });
        };
    </script>
{% endblock %}