// 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: [
                40,
                100, 100,
                100, 0, 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 : {},
            stopPath: [100], // Save stop along the path, necessary for bonus ball
            // Save outcome path
            drawn: [0],
            currentRound: 0,
            currentNode: 0, // 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,1,4, 7, 12, 18], // Path for szenario 3
            },
            showRepetitions: true,
            startAnew: false,
            cardDrawExplain:true,
            cardDraw:false,
            showCardRequest:true,
        },
        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.closeModal = this.closeModal.bind(this);
        this.cardClick = this.cardClick.bind(this);
        this.nextCardDraw = this.nextCardDraw.bind(this);
    }

    componentDidMount() {
        // Start with disabled sections
        // Grey background for selection section
        document.getElementById("pickWinningSide").classList.remove("alert-warning");
        document.getElementById("pickWinningSide").classList.add("alert-secondary");

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

    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, 
            stopPath, 
            startAnew, 
        } = this.state;

        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")
        }


        // 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> 
                Although the next card deck only contains white
                cards, you must draw a card.
            `
        } else if (szenario == 1 && currentRound == 5) {
            // Black ball - szenario 1 end
            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. 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>black</b>. </br>
                Black balls instruct the computer to stop risk-taking. </br> 
                Although the next card deck only contains black
                cards, you must draw a card.
            `
        } 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,
            stopPath: stopPath,
            startAnew: startAnew,
        })
    } 

    nextCoin() {
        document.getElementById("proceedAfterCard").classList.add("d-none")
        this.setState({ 
            cardDraw : false,
            imagePath: '/static/img/coin_questionmark.png',
            imagePathGuess: '/static/img/coin.png',
        },
            () => {
                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;
                } 
            }
        )
    }

    cardClick(cardID) {
        const {
            paths,
            continuation,
            currentRound,
            szenario,
            stopPath,
            startAnew,
        } = this.state

        let {showRepetitions} = this.state

        const currentNode = paths[szenario][currentRound]
        const clickedNum = parseInt(cardID.slice(-1))
        
        const whiteTarget = (continuation[currentNode] / 10)
        
        // Disable next button
        const visibleBtns = document
            .getElementsByClassName("btn-primary")
        
        for (let i=0; i < visibleBtns.length; i++) {
            visibleBtns[i].setAttribute("disabled", "disabled")
        }
        
        
        // Highlight drawn card
        document.getElementById(cardID).classList.add("card-grow")
        document.getElementById(cardID).style.zIndex = 100;
        document.getElementById(cardID).style.border = "3px solid #2E8BC0"

        $("#" + cardID).bind('animationend webkitAnimationEnd', 
            function() { 
                // Enable buttons after animation end
                for (let i=0; i < visibleBtns.length; i++) {
                    visibleBtns[i].removeAttribute('disabled');
                }
            } )

        let whiteCards = [];
        let blackCard = -10;

        if (szenario == 2 && currentRound == 2) {
            // Black card
            document.getElementById("currentNode").innerHTML = `   
                You drew a <b>black</b> card and 
                risk-taking stops.</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.
            `
            blackCard = clickedNum
            stopPath[currentRound] = "Stop"
            document.getElementById("startAnewBtn").classList.remove("d-none")
        } else if (szenario == 3 && currentRound == 0) {
            // Black card
            document.getElementById("currentNode").innerHTML = `   
                You drew a <b>black</b> card and 
                risk-taking stops.</br>
                If this was the result of your bonus task, your bonus 
                would be the accumulated earnings at this ball plus 
                the endowment.
            `
            blackCard = clickedNum
            stopPath[currentRound] = "Stop"

            // Repetition ends next
            showRepetitions = false
            this.props.simulationCompleted();
        } else {
            // White card
            whiteCards.push(clickedNum)
            document.getElementById("currentNode").innerHTML = `   
                You drew a <b>white</b> card and 
                risk-taking continues.
            `
            document.getElementById("proceedAfterCard").classList.remove("d-none")
        }

        while(whiteCards.length < whiteTarget){
            var r = Math.floor(Math.random() * 10);
            if (r == blackCard) {
                continue
            } else if (whiteCards.indexOf(r) === -1) {
                whiteCards.push(r);
            }
        }

        const cards = document
            .getElementsByClassName("virtualCard")

        for (let i=0; i < cards.length; i++){
            cards[i].setAttribute("disabled","disabled")
            
            let thisNum = parseInt(cards[i].id.slice(-1))
            if (whiteCards.indexOf(thisNum) === -1) {
                cards[i].style.background = "black"
                cards[i].style.color = "transparent"
            } else {
                cards[i].style.background = "white"
                cards[i].style.color = "transparent"
            }

        }

        this.setState({
            stopPath:stopPath,
            startAnew: startAnew,
            showRepetitions : showRepetitions,
            showCardRequest: false,
        })

    }

    nextCardDraw() {
        this.setState({
            cardDraw: true,
            showCardRequest: true,})
        
        document.getElementById("currentNode").innerHTML = `   
            Please draw a card.
        `

        // Remove coin toss feedback from right column
        document.getElementById("moveUp").classList.add("d-none")
        document.getElementById("moveDown").classList.add("d-none")
        document.getElementById("placeholderFooter").classList.remove("d-none")
    }

    closeModal( clickedCard, whiteCards) {
        document.getElementById("currentNode").innerHTML = `   
            You drew a <b>white</b> card and 
            risk-taking continues.
        `
        document.getElementById("proceedAfterCard").classList.remove("d-none")

        this.setState({
            cardDrawExplain: false,
            cardDraw: true}, () => {
                // Color cards as in popup
                const cards = document
                    .getElementsByClassName("virtualCard")

                for (let i=0; i < cards.length; i++){
                    cards[i].setAttribute("disabled","disabled")
                    
                    let thisNum = parseInt(cards[i].id.slice(-1))
                    if (whiteCards.indexOf(thisNum) === -1) {
                        cards[i].style.background = "black"
                        cards[i].style.color = "transparent"
                    } else {
                        cards[i].style.background = "white"
                        cards[i].style.color = "transparent"
                    }

                }

                document.getElementById(clickedCard).style.border = "3px solid #2E8BC0"
            })
    }

    startAnewBtn() {

        $("#lineSVG").empty();
        document.getElementById("startAnewBtn").classList.add("d-none")

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

        // Grey background for selection section
        if (!this.state.cardDraw) {
            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++) {
                ele[i].checked = false;
                ele[i].disabled = false;
            } 
        }

        // first ball is always a numbered ball
        document.getElementById("currentNode").innerHTML = `    
                This ball is <b>numbered</b>.
            `

        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,
            cardDraw : true,
        })
    }

    voidFunction() {
        return;
    }
    
    render () {
        return (
        <>
        <div className="row mb-3" id="coinTossing">
            <div id="leftColumn" className="col-md-6 pr-3 pl-1">
            { !this.state.cardDraw ? 
                <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>
            :
                <CardDeck 
                    key = {this.state.currentRound}
                    probability = {this.state.continuation[this.state.currentNode]}
                    showNumber = {true}
                    clickable = {true}
                    clickHandler={this.cardClick}
                    showRequest = {this.state.showCardRequest}
                />
            }
            </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 = {-1}
                            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.nextCardDraw}>
                                    Next card draw
                            </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.nextCardDraw}>
                                Next card draw
                        </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 mb-3" id="repetitionExplain mb">
            {/* Left column with textual description of current ball */}
            <div className="col-md-6 pr-3 pl-1" id="explanationCol">
                <div className="card h-100">
                    <div id="currentNode" className="card-body"> 
                    This ball is <b>numbered</b>.<br></br>
                    Numbered balls instruct the computer to stop
                    risk-taking with the probability displayed on the ball.
                    </div>
                </div>
            </div>
        </div>

        <div className="row" id="buttonRow">
            <div className="col">
                <button type="button" id="showModalBtn" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                    onClick={() => {document.getElementById("showModalBtn").classList.add("d-none")}}
                >
                    How do numbered balls work?
                </button>
                <button type="button" id="proceedAfterCard" className="btn btn-primary d-none" onClick={this.nextCoin}>
                    Next coin toss
                </button>
                <button type="button" id="startAnewBtn"
                    className="btn btn-primary d-none" 
                    onClick={this.startAnewBtn}>
                        Start anew
                </button>
            </div>
        </div>

        <CardDeckExplain 
            show={this.state.cardDrawExplain}
            initialProb = {this.state.continuation[this.state.currentNode]}
            closeModal = {this.closeModal}
        />
        </>
        )
    }
}

class CardDeckExplain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            explanationState:0,
            clickableCards: false,
            whiteCards:[],
            clickedCard:-1,
        }
        this.toggleExplanation = this.toggleExplanation.bind(this);
        this.cardClick = this.cardClick.bind(this);
    }

    toggleExplanation() { 
        const {explanationState} = this.state

        if (explanationState == 1) {
            this.setState({
                clickableCards: true
            }, () => {
                setTimeout( () => {
                    this.shuffleCards()
                    }, 500
                )
            })
        } 

        this.setState({ explanationState : this.state.explanationState +1 })
    }

    cardClick(cardID) {
        document.getElementById(cardID).classList.add("card-grow")
        document.getElementById(cardID).style.zIndex = 100
        document.getElementById(cardID).style.border = "3px solid #2E8BC0"

        //Disable another card click
        const cards = document
            .getElementById("cardContainer")
            .getElementsByClassName("virtualCard")
        
        const numWhiteCard = parseInt(this.props.initialProb/10)
        const whiteCards = [parseInt(cardID.slice(-1))]

        while(whiteCards.length < numWhiteCard){
            var r = Math.floor(Math.random() * 10);
            if(whiteCards.indexOf(r) === -1) {
                whiteCards.push(r);
            }
        }
    
        for (var i = 0; i < cards.length; i++) {
            cards[i].setAttribute("disabled","disabled") 
            
            let thisID = cards[i].id
            let cardNum = parseInt(thisID.slice(-1))
            
            cards[i].style.color = "transparent"

            if(whiteCards.indexOf(cardNum) === -1) {
                cards[i].style.background = "black"
            } else {
                cards[i].style.background = "white"
            }
        }

        this.setState({ 
            explanationState : this.state.explanationState +1,
            whiteCards: whiteCards,
            clickedCard: cardID, },
            () => {
            setTimeout( 
                () => {
                    document.getElementById("verificationExplain").classList.remove("d-none")
                    //document.getElementById("startPathExplain").classList.remove("d-none")
                    document.getElementById("closeModalBtn").disabled = false
                }, 1500)
            }
        )
    }

    shuffleCards(){
        const tmpCard = document
            .getElementById("cardContainer")
            .getElementsByClassName("virtualCard")
        
        const cards = Array.from(tmpCard)

        let positions = []

        cards.forEach( (card, idx) => {
            const left = card.style.left
            const top = card.style.top

            positions.push( [left, top, idx])
        })

        const toMiddle = () => {
                cards.forEach( (card, idx) => {
                    setTimeout(
                        () => {
                            card.style.zIndex = 10-idx;
                            card.style.top = '35%';
                            card.style.left = '35%';
                        }, idx * 30)
                })
        }

        const shuffling = () => {
            // Shuffle positions 1000 times
            for (let i = 0; i<=1000; i++) {
                
                const rnd1 = Math.floor(Math.random() * 10)
                const rnd2 = Math.floor(Math.random() * 10)

                const tmp = positions[rnd1]

                positions[rnd1] = positions[rnd2]
                positions[rnd2] = tmp
            }
        }

        const cardsToNewPos = () => {
            cards.forEach( (card, idx) => {
                const newLeft = positions[idx][0]
                const newTop = positions[idx][1]
                const cardNum = positions[idx][2]
                setTimeout(
                    () => {
                        card.style.top = newTop;
                        card.style.left = newLeft;
                        card.innerHTML = cardNum + 1;
                        card.id = "virtualCard_" + cardNum // Give new id to make animation correct
                    }, idx * 30)
                })
        }

        async function sequence () {

            await new Promise(
                // move cards to middle 
                (resolve) => {
                    toMiddle()
                    resolve("done")
                }
            )

            await new Promise(resolve => setTimeout(resolve, 800))
            
            await new Promise(
                // Shuffle positions
                (resolve) => {
                    shuffling()
                    resolve("done")
                }
            )

            await new Promise(
                // Move cards back
                (resolve) => {
                    cardsToNewPos()
                    resolve("done")
                }
            )

            await new Promise(resolve => setTimeout(resolve, 500))

            await new Promise(
                (resolve) => {
                    document.getElementById("modalTitle").classList.add("header-grow")
                    resolve("done")
                }
            )
        }

        sequence()
    }

    render() {
        
        if(!this.props.show){
            return null;
        } 

      return (
      <>
        <div className="modal fade" id="staticBackdrop" 
         data-bs-backdrop="static" 
         data-bs-keyboard="false" 
         tabIndex="-1" 
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true">
         <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="modalTitle">
                        {this.state.explanationState == 0 ?
                        <>A card draw determines whether risk-taking continues or stops </>
                        :
                        (this.state.explanationState == 1) ?
                        <>The number on the ball is the stopping probability</>
                        : this.state.explanationState == 2 ? 
                        <>Draw a card by clicking it!</>
                        : this.state.explanationState == 3 ? 
                        <>You drew a white card</>
                        :
                        <></>
                        }
                    </h5>
                </div>
              <div className="modal-body">
                <div className="row">
                    <div className="col-6 d-flex flex-column">

                        <div className="row">
                            <div className="col">
                            {this.state.explanationState == 0 ?
                                <>
                                At each ball, you must virtually draw
                                one card from a well-shuffled card deck: 

                                <ul>
                                    <li>
                                        If you draw a white card, risk-taking continues.
                                    </li>
                                    <li>
                                        If you draw a black card, risk-taking stops. 
                                    </li>
                                </ul>

                                The chance to draw a black card—and thus the chance that 
                                risk-taking stops—depends on the number of black cards in 
                                the card deck. For example, if six out of ten cards are black, 
                                the chance of drawing a black card is 60%.
                                </>
                            : this.state.explanationState == 1 ?
                                <>
                                The instruction in the example is to
                                stop risk-taking with 60% probability, such 
                                that the computer puts six black
                                and four white cards into the card deck.
                                <br></br>
                                <br></br>
                                You draw one card from a well-shuffled card 
                                deck.
                                </>
                            : this.state.explanationState == 2 ?
                                <></>
                            : this.state.explanationState == 3 ?
                            <>
                                <div>
                                    Risk-taking continues because 
                                    you drew a white card. 
                                </div>
                                <div id="verificationExplain" className="mt-4 d-none"> 
                                    <b>Note:</b> Verification.pdf describes how the computer resolves bonus-relevant card draws. 
                                    With this information, you can verify that any card draw is fair.
                                </div>
                            </> :
                            <></>
                        }
                        </div>
                        </div>

                        <div className="row mt-auto">
                            <div className="col text-center">
                                {this.state.explanationState == 0 ?
                                    <button type="button" className="btn btn-primary"
                                        onClick={this.toggleExplanation}
                                    >Let's do the ball from the example (numbered "60")
                                    </button>
                                : this.state.explanationState == 1 ?
                                    <button type="button" className="btn btn-primary"
                                        onClick={this.toggleExplanation}
                                    >Shuffle cards
                                    </button>
                                : this.state.explanationState == 2 ?
                                <></>
                                : this.state.explanationState == 3 ?
                                    <button id="closeModalBtn" type="button" className="btn btn-primary" 
                                        data-bs-dismiss="modal"
                                        onClick = {() => this.props.closeModal(this.state.clickedCard, this.state.whiteCards)}
                                        >
                                            Okay, got it
                                    </button>
                                :
                                <></>
                                }
                            </div>
                        </div>
                    </div>

                    <div className="col-6" style={{minHeight:"350px",}}>
                        <CardDeck 
                            probability = {this.props.initialProb }
                            showNumber = {false}
                            clickable = {this.state.clickableCards}
                            clickHandler={this.cardClick}
                        />
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )}
}