{{ extends "_templates/global/Page.html" }}

{{ block title }}
Pick an action
{{ endblock }}

{{ block style}}
<style>
    body {
        text-align: center;
    }

    .loader {
        display: inline-block;
        margin: auto;
        border: 20px solid #EAF0F6;
        border-radius: 50%;
        border-top: 20px solid #FF7A59;
        width: 100px;
        height: 100px;
        animation: spinner 4s linear infinite;
    }

    @keyframes spinner {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #timer {
        margin: auto;
        width: 300px;
        /* background-color: grey; */
        height: 30px;
        background: linear-gradient(to right, #ccc 0%, #ccc 1%, #efefef 1%, #efefef 99%);
        /* background: linear-gradient(to right, blue, red, blue); */

    }

    .otree-timer {
        display: none;
    }

    .payoff,
    .forgone-payoff {
        font-size: 1.3rem;
    }
</style>
{{ endblock}}

{{ block content }}

<p>You are playing as Player {{player.participant.player_role}}. You can choose between {{opt1}} or {{opt2}}.</p>
<!-- <div class="square">
    <img src="/static/oneshotDisaster/rare_disaster.png" />
</div> -->

<div class="square center">
    <canvas id="myCanvas" width="600" height="485"></canvas>
</div>

<!-- <div id="timer">
    You have
    <span id="timer_span"> &nbsp; </span>
    seconds left to make a decision.
</div> -->

<div id="timer" style="display: none;">
    <span id="timer_span"> &nbsp; </span> seconds left
    <div id="myBar"></div>
</div>

<br>
<div id="your-turn" style="display: none;">
    <p>Choose between {{opt1}} or {{opt2}}:</p>
    <button class="btn btn-primary" type="button" onclick="choice('{{opt1}}')">{{opt1}}</button> <button
        class="btn btn-primary" type="button" onclick="choice('{{opt2}}')">{{opt2}}</button>
</div>

<div class="loader" style="display: none;"></div>
<div class="payoff" style="display: none;">
</div>
<div class="forgone-payoff" style="display: none; margin-top: 1rem;">
</div>

<div id="timed_out" style="display: none;"> You timed out and will not receive any payoff from this round. In total you
    have timed out <span id="num_timeouts">{{player.participant.num_timeouts}}</span> times. If you time out
    {{player.session.config.max_timeouts}} times you will be removed from the experiment.
</div>

<div id="opp_timed_out" style="display: none;">
    Your partner timed out and the game was therefore not resolved. You receive a payoff of <span
        id="opp_timeout_payoff">{{player.payoff}}</span> as compensation.
</div>

<br>

{{ next_button }}

<div id="countdown-timer"></div>

<script src="/static/global/functions.js"></script>
<script>
    function choice(choice) {
        $("#your-turn").hide();
        $("#timer").hide();
        liveSend({ 'type': 'act', 'choice': choice });
    }

    var done = false;
    var action = false;
    var loaded = false;
    var ghost = {{ ghost | json}};
    // function left() {
    //     liveSend({ 'type': choice, 'act': 'left' });
    // }

    // function right() {
    //     liveSend({ 'type': choice, 'act': 'right' });
    // }

    function hideall() {
        $("#your-turn").hide();
        $("#timer").hide();
        $(".loader").hide();
        $("#timed_out").hide();
        $("#opp_timed_out").hide();
        $(".payoff").hide();
        $(".forgone-payoff").hide();
    }

    function startFeedbackCountdown() {
        let countdown = {{ session.config.timeout_seconds | json}};
    let countdownInterval = setInterval(function () {
        if (countdown <= 5) {
            $("#countdown-timer").html("In " + countdown + " seconds you will automatically proceed to the next page.");
        }
        countdown--;

        if (countdown <= 0) {
            clearInterval(countdownInterval); // Stop the countdown
            $("#countdown-timer").empty(); // Clear the countdown message
            $(".otree-btn-next").click(); // Call the onFinish callback
        }
    }, 1000); // Update every second
    }

    function liveRecv(data) {
        if (data.type == 'act') {
            action = true;
            if (data.choice !== "" && ghost) {
                hideall();
                $(".payoff").show();
                $(".payoff").html("Waiting for your partner to choose.");
                $('.loader').show();

                var wait_time = Math.floor(1000 * (Math.random() * 6));
                if (Math.random() < 0.5) {
                    wait_time = 0;
                }

                setTimeout(function () {
                    hideall();
                    $(".payoff").show();
                    $(".payoff").html("You chose " + data.choice + " and your partner chose " + data.opp_choice + ". Your payoff is <strong>" + data.payoff + "</strong>.");
                    $(".forgone-payoff").html("Had you instead chosen " + data.forgone_action + " your payoff would have been <strong>" + data.forgone_payoff + "</strong>.");
                    $(".forgone-payoff").show();
                    $(".otree-btn-next").show();
                    done = true;
                    startFeedbackCountdown();
                }, wait_time)

            }

            else if (data.choice !== "" && data.opp_choice !== "") {
                hideall();
                $(".payoff").show();
                $(".payoff").html("You chose " + data.choice + " and your partner chose " + data.opp_choice + ". Your payoff is <strong>" + data.payoff + "</strong>.");
                $(".forgone-payoff").html("Had you instead chosen " + data.forgone_action + " your payoff would have been <strong>" + data.forgone_payoff + "</strong>.");
                $(".forgone-payoff").show();
                $(".otree-btn-next").show();
                done = true;
                startFeedbackCountdown();
            }
            else {
                hideall();
                $(".payoff").show();
                $(".payoff").html("Waiting for your partner to choose.");
                $('.loader').show();
            }
        }
        else if (data.type == 'load') {
            if (data.timeout) {
                hideall();
                $("#timed_out").show();
                $(".otree-btn-next").show();
                done = true;
            }
            else if (data.opp_timeout) {
                hideall();
                $("#opp_timed_out").show();
                $(".otree-btn-next").show();
                done = true;
            }
            else if (data.choice !== "" && data.opp_choice !== "") {
                hideall();
                $(".payoff").show();
                $(".payoff").html("You chose " + data.choice + " and your partner chose " + data.opp_choice + ". Your payoff is <strong>" + data.payoff + "</strong>.");
                $(".forgone-payoff").html("Had you instead chosen " + data.forgone_action + " your payoff would have been <strong>" + data.forgone_payoff + "</strong>.");
                $(".forgone-payoff").show();
                $(".otree-btn-next").show();
                done = true;
                action = true;
                startFeedbackCountdown();
            }
            else if (data.choice !== "") {
                hideall();
                $(".payoff").show();
                $(".payoff").html("Waiting for your partner to choose.");
                $('.loader').show();
                action = true;
            }
            else {
                hideall();
                $("#timer").show();
                $("#your-turn").show();
            }
            loaded = true;
        }
        else if (data.type == "timeout") {
            hideall();
            $("#timed_out").show();
            $(".otree-btn-next").show();
            $("#num_timeouts").text(data.num_timeouts);
            done = true;
            setTimeout(function () {
                $(".otree-btn-next").click(); // This will click the 'otree-btn-next' button
            }, wait_seconds * 1000);
        }

        else if (data.type == "opp_timeout") {
            hideall();
            $("#opp_timed_out").show();
            $("#opp_timeout_payoff").text(data.payoff);
            $(".otree-btn-next").show();
            done = true;
            action = true;
            setTimeout(function () {
                $(".otree-btn-next").click(); // This will click the 'otree-btn-next' button
            }, wait_seconds * 1000);
        }

    }

    function makeTimer(seconds) {
        console.log("makeTimer");
        var seconds_left = seconds;
        var stepsize = 100 / seconds;
        var elem = document.getElementById("timer");
        var width = 1;
        $("#timer_span").text(seconds_left);
        $("#timed_out").hide();
        return new Promise(function (resolve) {
            var interval = setInterval(function () {
                $('#timer_span').text(--seconds_left);
                width = width + stepsize;
                var rest = 100 - width;
                // elem.style.width = width + "%";
                elem.style.background = "linear-gradient(to right, #ccc 1%, #ccc " + width + "%, #efefef " + width + "%)";
                if (seconds_left == 0) {
                    $("#timer_span").text("&nbsp;");
                    clearInterval(interval);
                    resolve();
                }
                // console.log(seconds_left);
            }, 1000);
        });
    }

    function oppTimer(seconds) {
        var seconds_left = seconds;
        return new Promise(function (resolve) {
            var interval = setInterval(function () {
                seconds_left--;
                if (seconds_left == 0) {
                    clearInterval(interval);
                    resolve();
                }
            }, 1000);
        });
    }

    document.addEventListener('DOMContentLoaded', (event) => {
        $(".otree-btn-next").hide();
        $(".loader").hide();
        $("#opp_timed_out").hide();
        liveSend({ 'type': 'load' });
        var p1_tails = formatNumber({{ player.p1_tails | json }});
    var p2_tails = formatNumber({{ player.p2_tails | json }});
    var p1_left = formatNumber({{ player.p1_left | json }});
    var p1_left_prob = {{ player.p1_left_prob | json}};
    var p1_left_otherwise = formatNumber({{ player.p1_left_otherwise | json }});
    var p2_left = formatNumber({{ player.p2_left | json }});
    var p1_right = formatNumber({{ player.p1_right | json }});
    var p2_right = formatNumber({{ player.p2_right | json }});
    drawTree(p1_tails = p1_tails, p2_tails = p2_tails, p1_left = p1_left, p1_left_prob = p1_left_prob, p1_left_otherwise = p1_left_otherwise, p2_left = p2_left, p1_right = p1_right, p2_right = p2_right);


    function waitForIt() {
        if (!loaded) {
            setTimeout(function () { waitForIt() }, 100);
        } else {
            if (!action && !done) {
                var wait_seconds = {{ session.config.timeout_seconds | json}};
        var timer = makeTimer(wait_seconds);
        timer.then(function () {
            if (!done && !action) {
                $("#timer").hide();
                liveSend({ 'type': 'timeout' });
            }
        });
    }
    if (!done) {
        var opp_timer = oppTimer(20);
        opp_timer.then(function () {
            if (!done) {
                $("#timer").hide();
                liveSend({ 'type': 'opp_timeout' });
            }
        });
    }
            };
        }

    waitForIt();


    });    
</script>

{{ endblock }}