{% 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/decoloringResolution.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">
    ReactDOM.render(<DecoloringBonus
        roundNumber = {js_vars.roundNumber}
        drawn = {js_vars.path}
        continuationDec = {js_vars.stopStrategy.continuation}
        initialColor = {js_vars.initialColor}
    />, document.querySelector('.riskResolution'))
   
    function liveRecv(data) {
        let {
            type, 
            value, 
            roundNumber, 
            drawn, 
            imagePathGuess,
            imagePathOutcome,
            } = data;

        let key = roundNumber

        // Calculate decisions along path
        const continuationDec = []

        function arrayEquals(a, b) {
            return Array.isArray(a) &&
                Array.isArray(b) &&
                a.length === b.length &&
                a.every((val, index) => val === b[index]);
        }

        for (let i=0; i <= roundNumber; i++) {
            const reachedNode = drawn[i]
            const currentStop = js_vars.stopStrategy.continuation[reachedNode]

            if (currentStop == 0) {
                continuationDec.push("Stop")
            } else if (currentStop == -100) {
                // test path-dependent stopping
                const relevantPaths = js_vars.allPaths[reachedNode]
                const realizedPath = drawn.slice(0,i+1)

                let pathName = ""
                for (const [key, value] of Object.entries(relevantPaths)) {
                    if (arrayEquals(value[1], realizedPath)) {
                        pathName = value[0]
                        break;
                    }
                }

                const pdDecision = js_vars.stopStrategy.pdStopDecision[pathName]

                if (pdDecision == "Stop") {
                    continuationDec.push("Stop")
                } else {
                    continuationDec.push(100)
                }

            } else {
                continuationDec.push(currentStop)
            }
        }

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

{% endblock %}