// Note: We keep the data and the states in this component

class BasicStopExplain extends React.Component {
    constructor(props) {
        super(props); 
        this.state = {
            // Check whether all nodes are clicked
            isClicked: [
                true,
                true, true,
                true, true, true,
                true, true, true, true,
                true, true, true, true, true
            ],
            // Save continuation decision in percent
            continuation: [
                100,
                100, 100,
                0, -100, 100,
                100, 100, 100, 100,
                100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
            pdStopDecision : {
                "choice_4_0" : "Continue",
                "choice_4_1" : "Stop"
            },
            stopPath: [100], // Save stop along the path, necessary for bonus ball
            // Save outcome path
            drawn: [0],
            currentRound: 0,
            currentNode: -1, // Keep track of currently clicked node
            imagePath: '/static/img/coin_questionmark.png',
            imagePathGuess: '/static/img/coin.png',
            winningSide: "",
            nextCoin: false,
            szenario: 1,
            paths: {
                "1": [0,1,3,7, 11, 17], // Path for szenario 1
                "2": [0,1,4, 7, 12, 18], // Path for szenario 2
                "3": [0,2,4, 7, 12, 18] // Path for szenario 3
            },
            showRepetitions: true,
            startAnew: false,
            showPDChoice:false,
        },
        this.simulateCoinToss = this.simulateCoinToss.bind(this);
        this.winningSideUpdate = this.winningSideUpdate.bind(this);
        this.startAnewBtn = this.startAnewBtn.bind(this);
        this.nextCoin = this.nextCoin.bind(this);
        this.radioClick = this.radioClick.bind(this);
        this.updatePDStop = this.updatePDStop.bind(this);
    }

    winningSideUpdate(chosenSide) {
        // Disable winning side buttons
        var ele = document.getElementsByName("winningSideInput");
        for(var i=0;i<ele.length;i++)
           ele[i].disabled = true;
           
        if (chosenSide == "H") {
            this.setState({
                winningSide: chosenSide,
                imagePathGuess: '/static/img/coin_h.png'
            })
        } else if (chosenSide == "T") {
            this.setState({
                winningSide: chosenSide,
                imagePathGuess: '/static/img/coin_t.png'
            })
        }

        setTimeout(
            () => this.simulateCoinToss(),
            500
        );
    }

    simulateCoinToss(){
        const {paths} = this.state;
        let {currentNode,
            szenario, 
            drawn, 
            currentRound, 
            showRepetitions, 
            stopPath, 
            startAnew, 
            showPDChoice} = this.state;

        if (!showRepetitions){
            document.getElementById("repetitionExplain").classList.add("d-none")

            return;
        }

        currentRound = currentRound + 1;

        let relPaths = paths[szenario]

        drawn[currentRound] = relPaths[currentRound]
        stopPath[currentRound] = this.state.continuation[drawn[currentRound]]

        // Grey background for selection section
        document.getElementById("pickWinningSide").classList.remove("alert-warning");
        document.getElementById("pickWinningSide").classList.add("alert-secondary");

        // Disable winning side buttons
        var ele = document.getElementsByName("winningSideInput");
        for(var i=0;i<ele.length;i++)
           ele[i].disabled = true;

        // Update outcome coin
        if ((drawn[currentRound] - drawn[currentRound-1]) == currentRound) {
            // Up move
            if (this.state.winningSide == "H"){
                this.setState( {
                    imagePath: '/static/img/coin_h.png'
                })
            }
            else {
                this.setState( {
                    imagePath: '/static/img/coin_t.png'
                })
            }
            document.getElementById("coinTossWon").classList.remove("d-none")
            document.getElementById("placeholderFooter").classList.add("d-none")
            document.getElementById("moveUp").classList.remove("d-none")
        } else {
            // Down move
            if (this.state.winningSide == "H"){
                this.setState( {
                    imagePath: '/static/img/coin_t.png'
                })
            }
            else {
                this.setState( {
                    imagePath: '/static/img/coin_h.png'
                })
            }
            document.getElementById("coinTossLost").classList.remove("d-none")
            document.getElementById("placeholderFooter").classList.add("d-none")
            document.getElementById("moveDown").classList.remove("d-none")
        }


        // Update explanations text
        if (currentRound == 1 && szenario == 1) {
            document.getElementById("explanationCol").classList.remove("d-none")
        }

        // Toggle text for szenarios and balls

        if (szenario == 1 && currentRound == 1) {
            document.getElementById("currentNode").innerHTML = `    
                This ball is <b>white</b>.
                White balls instruct the computer to continue risk-taking. </br> 
                Please resolve the next single risk.
            `
            document.getElementById("explanationCol").scrollIntoViewIfNeeded({
                block: "end", 
                inline: "nearest",
                behaviour: "smooth",
            })
        } else if (szenario == 1 && currentRound ==2) {
            // Black ball - szenario 1 end
            document.getElementById("currentNode").innerHTML = `    
                This ball is <b>black</b>.
                A black ball instructs the computer to stop risk-taking. </br>
                If this was the result of your bonus task, your bonus 
                would be the accumulated earnings at this ball plus
                the endowment. Thus, the ball is colored gold and 
                contains a "B" for bonus.</br> 
                Please click <b>"Start anew"</b> to practice 
                another path through the ball triangle.
            `
            stopPath[currentRound] = "Stop"
            startAnew = true
        } else if (szenario == 2 && currentRound == 2) {
            // white-black-gradient ball reached from above
            document.getElementById("currentNode").innerHTML = `   
                This ball is <b>white-black-gradient</b>. </br>
                The path taken to the ball was "first up, then down", as highlighted. 
                The computer follows the <b>exemplary instruction for this path</b> 
                as shown on the right 
                and continues risk-taking. </br>
                Please resolve
                the next single risk.
            `
            showPDChoice = true;
            currentNode = drawn[currentRound]
        } else if (szenario == 2 && currentRound == 3){
            document.getElementById("currentNode").innerHTML = `    
            This ball is <b>white</b>.
            `
            showPDChoice = false;
            currentNode = -1;
        } else if (szenario == 2 && currentRound == 5) {
            document.getElementById("currentNode").innerHTML = `    
                This ball is <b>black</b>. </br>
                You are in the last column of the ball triangle and
                no more single risks can be taken.</br>
                If this was the result of your bonus task, your bonus 
                would be the accumulated earnings at this ball plus 
                the endowment.</br> 
                Please click <b>"Start anew"</b> to practice 
                another path through the ball triangle.
            `
            document.getElementById("explanationCol").scrollIntoViewIfNeeded({
                block: "end", 
                inline: "nearest",
                behaviour: "smooth",
            })
            stopPath[currentRound] = "Stop"
            startAnew = true
        } else if (szenario == 3 && currentRound == 2) {
            // white-black-gradient ball reached from above
            document.getElementById("currentNode").innerHTML = `   
                This ball is <b>white-black-gradient</b>.</br>
                The path taken to the ball was "first down, then up", as highlighted. 
                The computer follows the <b>exemplary instruction for this path</b>  
                as shown on the right 
                and stops risk-taking. </br>
                If this was the result of your bonus task, your bonus 
                would be the accumulated earnings at this ball plus 
                the endowment.</br>
            `
            showPDChoice = true;
            currentNode = drawn[currentRound]
            stopPath[currentRound] = "Stop"

            // Repetition ends next
            showRepetitions = false
            this.props.simulationCompleted();


        } else {
            // All other balls are white balls
            document.getElementById("currentNode").innerHTML = `    
                This ball is <b>white</b>.
            `
        }

        this.setState({
            currentNode: currentNode, 
            drawn: drawn,
            currentRound: currentRound,
            szenario: szenario,
            showRepetitions : showRepetitions,
            stopPath: stopPath,
            startAnew: startAnew,
            showPDChoice: showPDChoice,
        }, () => {
            // Set color of row in PD choice panel
            // Must be done here because only rendered if showPDChoice == true
            if (szenario == 2 && currentRound == 2) {
                document.getElementById("choice_4_0_row").classList.add("bg-light")
                document.getElementById("choice_4_1_row").classList.remove("bg-light")

                // Disable radio buttons
                const radios = document
                    .getElementById("pdInstructCol")
                    .getElementsByClassName("largerRadio")

                for (let i=0; i < radios.length; i++) {
                    radios[i].disabled = true;
                }

                // Remove close button
                const footer = document
                    .getElementById("pdInstructCol")
                    .getElementsByClassName("card-footer")
            
                footer[0].classList.add("d-none")

            } else if (szenario == 3 && currentRound == 2) {
                document.getElementById("choice_4_0_row").classList.remove("bg-light")
                document.getElementById("choice_4_1_row").classList.add("bg-light")

                // Disable radio buttons
                const radios = document
                    .getElementById("pdInstructCol")
                    .getElementsByClassName("largerRadio")

                for (let i=0; i < radios.length; i++) {
                    radios[i].disabled = true;
                }

                // Remove close button
                const footer = document
                    .getElementById("pdInstructCol")
                    .getElementsByClassName("card-footer")
                
                footer[0].classList.add("d-none")
            }
        })
    } 

    nextCoin() {
        document.getElementById("pickWinningSide").classList.add("alert-warning");
        document.getElementById("pickWinningSide").classList.remove("alert-secondary");
        
        document.getElementById("coinTossWon").classList.add("d-none")
        document.getElementById("coinTossLost").classList.add("d-none")
        document.getElementById("moveUp").classList.add("d-none")
        document.getElementById("moveDown").classList.add("d-none")
        document.getElementById("placeholderFooter").classList.remove("d-none")

        var ele = document.getElementsByName("winningSideInput");
    
        for(var i=0;i<ele.length;i++) {1
            ele[i].checked = false;
            ele[i].disabled = false;
        } 

        this.setState({
            imagePath: '/static/img/coin_questionmark.png',
            imagePathGuess: '/static/img/coin.png',
        })

    }

    startAnewBtn() {

        $("#lineSVG").empty();

        // Start new szenario
        let currentRound = 0
        let drawn = [0]

        // Grey background for selection section
        document.getElementById("pickWinningSide").classList.add("alert-warning");
        document.getElementById("pickWinningSide").classList.remove("alert-secondary");

        document.getElementById("coinTossWon").classList.add("d-none")
        document.getElementById("coinTossLost").classList.add("d-none")
        document.getElementById("moveUp").classList.add("d-none")
        document.getElementById("moveDown").classList.add("d-none")
        document.getElementById("placeholderFooter").classList.remove("d-none")

        document.getElementById("currentNode").innerHTML = `    
                This ball is <b>white</b>.
            `

        var ele = document.getElementsByName("winningSideInput");
    
        for(var i=0;i<ele.length;i++) {
            ele[i].checked = false;
            ele[i].disabled = false;
        } 

        this.setState({
            imagePath: '/static/img/coin.png',
            imagePathGuess: '/static/img/coin.png',
            drawn: drawn,
            currentRound: currentRound,
            szenario: this.state.szenario + 1,
            stopPath: [100],
            startAnew: false,
        })
    }

    voidFunction() {
        return;
    }

    radioClick() {
        const {currentNode} = this.state
        const allPaths = js_vars.allPaths[currentNode]

        const clickedRadios = document
            .getElementById("pdInstructCol")
            .querySelectorAll('input[type=radio]:checked');

        if (allPaths.length == clickedRadios.length) {
            setTimeout(() => { 
                this.updatePDStop(clickedRadios);
              }, 200); 
        }
    }

    updatePDStop(clickedRadios) {
        let {pdStopDecision} = this.state

        for (let i=0; i< clickedRadios.length; i++){
            let thisRadio = clickedRadios[i];
            let path = thisRadio.name
            let decision = thisRadio.value

            pdStopDecision[path] = decision
        }

        this.setState({pdStopDecision:pdStopDecision})
    }
    
    render () {
        return (
        <>
        <div className="row mb-3" id="coinTossing">
            <div className="col-md-6 pr-3 pl-1">
                <div className="card" id="coinToss-widget" style={{
                minHeight: "400px",
                }}>
                    <h5 className="card-header  bg-dark text-white text-center">Coin toss: Win or lose?</h5>
                    <div className="card-body" id="treeStructure" style={{
                        height: "250px",
                        width: "400px",
                        position: "relative",
                        margin: "0 auto"
                    }}>
                        <table style={{
                                width:"100%", 
                                alignSelf: "center", 
                                position: "relative", 
                                margin: "0 auto",
                                top: "0%", }}>
                            <tbody>
                                <tr>
                                    <th className="text-center">
                                        <strong>Coin toss outcome</strong>
                                    </th>
                                    <th className="text-center">
                                        <strong>The winning side</strong>
                                    </th>
                                </tr>
                                
                                <tr>
                                    <td id="coinTossGuess" className="align-middle text-center" style={{width:"50%"}}>
                                        <img src={this.state.imagePathGuess} style={{
                                            height: "100px"
                                        }}/>
                                    </td>
                                    <td id="coinTossOutcome" className="align-middle text-center" style={{width:"50%"}}>
                                        <img src={this.state.imagePath} style={{
                                            height: "100px"
                                        }}/>
                                    </td>

                                </tr>

                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>

                                <tr id="pickWinningSide" className="alert alert-warning text-center">
                                    <td colSpan="2">
                                        <table className="center table table-sm table-borderless" style={{width:"100%", textAlign: "center"}}>
                                            <colgroup>
                                                <col span="1" style={{width: "50%"}}/>
                                                <col span="1" style={{width: "50%"}}/>
                                            </colgroup>
                                            <tbody>
                                            <tr>
                                                <td>Heads</td>
                                                <td>Tails</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="radio" name="winningSideInput" id="winningSideInput_H" value="H"
                                                        onClick={() => this.winningSideUpdate("H")}
                                                        className="largerRadio"/>
                                                </td>
                                                <td>
                                                    <input type="radio" name="winningSideInput" id="winningSideInput_T" value="T" 
                                                        onClick={() => this.winningSideUpdate("T")}
                                                        className="largerRadio"/>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>                                         
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div id="coinTossWon" className="card-footer alert alert-success text-center d-none" 
                    style={{
                        height: "60px",
                        marginBottom:"0px",
                    }}>
                        You won this single risk. 
                    </div>

                    <div id="coinTossLost" className="card-footer alert alert-danger text-center d-none" 
                    style={{
                        height: "60px",
                        marginBottom:"0px",
                    }}>
                        You lost this single risk. 
                    </div>

                </div>
            </div>

            <div className="col-md-6 pr-3 pl-1">
                <div className="card" id="repeatedRisk-widget" style={{
                minHeight: "400px",
                }}>
                    <h5 className="card-header  bg-dark text-white text-center">The repeated risk</h5>
                    <div className="card-body" id="treeStructure" style={{
                        height: "250px",
                        width: "300px",
                        position: "relative",
                        margin: "0 auto"
                    }}>
                        <svg id="lineSVG" 
                        style={{ 
                            position: "absolute",
                            left: "0",
                            top:"0",
                            height: "100%",
                            width: "100%"
                        }}/>
                        <DecisionTree
                            key = {this.state.currentRound} 
                            currentRound = {this.state.currentRound} 
                            upTick = {js_vars.upTick} 
                            isClicked={this.state.isClicked}
                            mouseEnter={this.voidFunction} 
                            mouseLeave={this.voidFunction}
                            ClickHandler = {this.voidFunction}
                            drawn={this.state.drawn}
                            currentNode = {this.state.currentNode}
                            continuation={this.state.continuation} 
                            pulse={true}
                            continuationDec = {this.state.stopPath}
                        />
                    </div>

                <div id="placeholderFooter" 
                    style={{
                        height: "60px",
                        marginBottom:"0px",
                    }}>
                </div>


                <div id="moveUp" 
                    className="card-footer alert alert-success 
                                d-inline-flex justify-content-center align-items-center d-none" 
                    style={{
                        height: "60px",
                        marginBottom:"0px",
                        }}>
                    <div className="col d-inline-flex justify-content-center align-items-center" >
                        You moved up.
                    </div>
                    
                    { this.state.showRepetitions ?
                    <>
                        { (!this.state.startAnew) ? 
                        <div className="col d-inline-flex justify-content-center align-items-center">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.nextCoin}>
                                    Next coin toss
                            </button>
                        </div>
                        :
                        <div className="col d-inline-flex justify-content-center align-items-center">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.startAnewBtn}>
                                    Start anew
                            </button>
                        </div>
                        }
                    </>
                    :
                    <></>
                    }
                
                </div>

                <div id="moveDown" 
                    className="card-footer alert alert-danger 
                                d-inline-flex justify-content-center align-items-center d-none" 
                    style={{
                        height: "60px",
                        marginBottom:"0px",
                        }}>
                    <div className="col-5 text-center d-inline-flex justify-content-center align-items-center" >
                        You moved down.
                    </div>
                    
                    { this.state.showRepetitions ? 
                    <>
                    { (!this.state.startAnew) ? 
                    <div className="col d-inline-flex justify-content-center align-items-center">
                        <button type="button" 
                            className="btn btn-primary px-3" 
                            onClick={this.nextCoin}>
                                Next coin toss
                        </button>
                    </div>
                    :
                    <div className="col d-inline-flex justify-content-center align-items-center">
                        <button type="button" 
                            className="btn btn-primary px-3" 
                            onClick={this.startAnewBtn}>
                                Start anew
                        </button>
                    </div>
                    } 
                    </>
                    :
                    <></>
                    }
                </div>
                </div>
            </div>
        </div>

        <div className="row" id="repetitionExplain">
            {/* Left column with textual description of current ball */}
            <div className="col-md-6 pr-3 pl-1 d-none" id="explanationCol">
                <div className="card h-100">
                    <div id="currentNode" className="card-body"> 
                    </div>
                </div>
            </div>
            
            {/* Right column showing path-dependent stopping decision */}

            { this.state.showPDChoice &&
                <PathNodeChoice
                    show = {this.state.showPDChoice}
                    pdStop = {this.state.pdStopDecision}
                    header = {"Exemplary path-dependent instruction"}
                    currentNode = {this.state.currentNode}
                    radioClick = {this.radioClick}
                    closeMe = {this.voidFunction}
                />
            }
        </div>
        </>
        )
    }

}