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

{% block title %}
    Your bonus task is the Decoloring Task
{% endblock %}

{% block content %}

<div class="my-3 bg-light px-3 py-3 rounded border">
    
    <div class="row">
        <div class="col px-3">
            Your bonus is determined by taking the single risk
            repeatedly according to your decoloring. 
            Please resolve the risk below.  
        </div>
    </div>
    
    </br>
    
    <!--REACT component-->
    <div class="riskResolution"></div>
    
    </br>
    <div id="continueSection" class="row d-none">
        <div class="col">
            <div class="alert alert-info">
                You have reached your bonus ball. Please proceed to the next page
                to receive your bonus.
            </div>

            <button class="btn btn-primary mt-2" id="confirm_btn">
                Continue
            </button>
        </div>

    </div>
</div>


<!--Load React Components-->
<script type="text/babel" src="{% static 'js/randDecoloringResolution.js' %}"></script>
<script type="text/babel" src="{% static 'js/coinToss.js' %}"></script>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>
<script type="text/babel" src="{% static 'js/cardDeck.js' %}"></script>

<script type="text/babel">
    const currentNode = js_vars.path[js_vars.roundNumber]

    let type = ""
    let value = 0

    if (js_vars.chosenCard[js_vars.roundNumber] >=0) {
        type = "card"
        value = js_vars.chosenCard[js_vars.roundNumber]
    }

    ReactDOM.render(<DecoloringBonus
        type = {type}
        previousValue = {value}
        roundNumber = {js_vars.roundNumber}
        drawn = {js_vars.path}
        continuationDec = {js_vars.cardOutcome}
        initialColor = {js_vars.initialColor}
        currentProb = {js_vars.stopStrategy.continuation[currentNode]}
        cardOutcome = {js_vars.cardOutcome}
    />, document.querySelector('.riskResolution'))
   
    function liveRecv(data) {
        let {
            type, 
            value, 
            roundNumber, 
            drawn, 
            imagePathGuess,
            imagePathOutcome,
            cardOutcome
            } = data;

        let key = roundNumber

        const currentNode = drawn[roundNumber]
        const currentProb = js_vars.stopStrategy.continuation[currentNode]

        if (type == "card") {
            key = roundNumber + Math.random(); // ensures reload
        }

        if (type == "payment") {
            console.log("payment")
        }
        else {
            ReactDOM.render(
                <DecoloringBonus
                    type = {type}
                    key = {key}
                    previousValue = {value}
                    roundNumber = {roundNumber}
                    cardOutcome = {cardOutcome}
                    drawn = {drawn}
                    continuationDec = {cardOutcome}
                    imagePathGuess = {imagePathGuess}
                    imagePathOutcome = {imagePathOutcome}
                    currentProb = {currentProb}          
                />, 
                document.querySelector('.riskResolution'))
        }
    }
    
</script>

{% endblock %}