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

class TriangleExplain 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,
                100, 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
            ],
            // Save outcome path
            drawn: [0],
            indArray: [
                [0],
                [1, 2],
                [3, 4, 5],
                [6, 7, 8, 9],
                [10, 11, 12, 13, 14],
                [15, 16, 17, 18, 19, 20]
              ],
            currentRound: 0,
            coinTossCounter: 0,
            lastRiskWon:"",
            payment : [],
            imagePath: '/static/img/coin_questionmark.png',
            imagePathGuess: '/static/img/coin.png',
            winningSide: "",
            nextCoin: false,
            hoverNodes: false,
            riskOutcome: [],
            coinTossOutcome: [],
        }
        this.simulateCoinToss = this.simulateCoinToss.bind(this);
        this.nextCoin = this.nextCoin.bind(this);
        this.winningSideUpdate = this.winningSideUpdate.bind(this);
        this.submitData = this.submitData.bind(this);
    }

    componentDidMount() {
        this.calculateEarnings();

        // Hide cursor on triangle if hoverNodes is false
        const {hoverNodes} = this.state

        if (!hoverNodes) {
            var balls = document.getElementsByClassName("ball");
            for (let i = 0; i < balls.length; i++) {
                balls.item(i).style.cursor = 'default';
            }
            
            document.getElementById("treeStructure").style.cursor = 'default';
        }

    }

    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 userInput = this.state.winningSide
        let {currentRound, drawn, coinTossCounter, lastRiskWon, riskOutcome, coinTossOutcome} = this.state

        coinTossOutcome.push(userInput)
        //document.getElementById("pickWinningSide").classList.add("d-none")

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

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

        let coinOutcome = this.coin()
        
        currentRound = currentRound + 1

        // Second coin toss is not random
        if (coinTossCounter + 1 == 2) {
            if (lastRiskWon) {
                // Lose this round
                if (userInput == "H") {
                    coinOutcome = "T"
                } else {
                    coinOutcome = "H"
                }
            } else {
                // Win this round
                coinOutcome = userInput
            }
        }

        if (userInput == coinOutcome) {
            document.getElementById("coinTossWon").classList.remove("d-none")
            document.getElementById("moveUp").classList.remove("d-none")
            document.getElementById("placeholderFooter").classList.add("d-none")
            drawn[currentRound] = drawn[currentRound-1] + currentRound
            
            this.setState({drawn})

            if (currentRound < 3 && coinTossCounter <3) {
                document.getElementById("explainDiv").classList.remove("d-none")
                
                document.getElementById("explainText").innerHTML = `
                Because you 
                won this repetition of the single risk, you moved up 
                in the triangle depicted on
                the right.
                Your accumulated
                earnings increased by £${js_vars.upTick.toFixed(2)},
                to £${parseFloat(this.state.payment[this.state.drawn[this.state.drawn.length-1]]).toFixed(2)}.
                ${(currentRound == 2) ? "</br></br> <b>From now on, you again resolve the single risk with one click.</b>":""}
            `
            }
        } else {
            document.getElementById("coinTossLost").classList.remove("d-none")
            document.getElementById("moveDown").classList.remove("d-none")
            document.getElementById("placeholderFooter").classList.add("d-none")

            drawn[currentRound] = drawn[currentRound-1] + currentRound + 1
            this.setState({drawn})

            if (currentRound < 3 && coinTossCounter <3) {
                document.getElementById("explainDiv").classList.remove("d-none")
                
                document.getElementById("explainText").innerHTML = `
                Because you 
                lost this repetition of the single risk, you moved down 
                in the triangle depicted on
                the right.
                Your accumulated earnings
                decreased by £${js_vars.upTick.toFixed(2)}, 
                to £${parseFloat(this.state.payment[this.state.drawn[this.state.drawn.length-1]]).toFixed(2)}.
                ${(currentRound == 3) ? "</br></br> <b>From now on, you can again resolve the single risk with one click.</b>":""}
                `
            }
        }

        riskOutcome.push(drawn[currentRound])

        if (currentRound == 5) {
            this.props.treeCompleted();
            this.setState({hoverNodes:true},
                () => {
                    // Enable mouse pointer on tree
                    var balls = document.getElementsByClassName("ball");
                    for (let i = 0; i < balls.length; i++) {
                        balls.item(i).style.cursor = 'auto';
                    }
                    
                    document.getElementById("treeStructure").style.cursor = 'auto';
            })
        }

        this.setState({
            nextCoin: true,
            coinTossCounter: coinTossCounter + 1,
            currentRound,
            lastRiskWon: (userInput == coinOutcome),
            riskOutcome: riskOutcome, 
            coinTossOutcome: coinTossOutcome,
        })   
    }

    coin() {
        let coinSide = ""
        let outcome = Math.round(Math.random())

        if (outcome === 0){
            coinSide = "H"
            this.setState({
                imagePath: '/static/img/coin_h.png',
            })
        } else {
            coinSide = "T"
            this.setState({
                imagePath: '/static/img/coin_t.png',    
            })
        }

        return coinSide
    }

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

        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")
        
        if (this.state.coinTossCounter < 4) {
            document.getElementById("explainDiv").classList.add("d-none")
        }

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

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

        if (this.state.currentRound == 5) {
            $("#lineSVG").empty();
            this.setState({
                currentRound: 0,
                drawn: [0],
            })
        }

        this.submitData();
    }

    calculateEarnings = () => {
        const {indArray} = this.state;
        let upTick = js_vars.upTick
        let payment = []
        let j = 0

        for (let i in indArray) {
            for (let k in indArray[i]) {
                payment[j] = upTick * i - 2 * k * upTick;
                j++ 
            }
        }
        this.setState({payment})
    }

    mouseEnter = (e, currentNode) => {
        const {payment, hoverNodes} = this.state

        if (hoverNodes){
            setTimeout(function() {
                document.getElementById("accumulatedEarnings").classList.remove("d-none")
                document.getElementById("accumulatedEarnings").style.backgroundColor = "#72C3F1"
                document.getElementById("drawnEarningsText").classList.add("d-none")
                document.getElementById("accumulatedEarnings").innerHTML = `    
                            Your accumulated earnings at this ball are </br>
                            £${payment[currentNode].toFixed(2)}
                        `
                    }, 300);

            setTimeout(function() {
                document.getElementById("accumulatedEarnings").style.backgroundColor = ""
                    }, 900);
        } else {
            var balls = document.getElementsByClassName("ball");
            for (let i = 0; i < balls.length; i++) {
                balls.item(i).style.cursor = 'default';
            }
        }
                
    }

    mouseLeave = () => {
        setTimeout(function() {
            document.getElementById("accumulatedEarnings").classList.add("d-none")
            document.getElementById("drawnEarningsText").classList.remove("d-none")
                }, 300);
    }

    voidFunction(){
        return
    }
    
    // Submit information buttons work
    submitData = () =>{
        let data = {
            riskOutcome: this.state.riskOutcome,
            coinToss: this.state.coinTossOutcome,
        }

        liveSend(data) // Sends state to oTree backend        
    }

    render () {
        
        return (
        <>
        <div className="row mb-3">
            {/* Left column */}
            <div className="col-md-6 pr-3 pl-1">
                <div className="card" style={{minHeight: "400px"}}>
                    <h5 className="card-header  bg-dark text-white text-center">Coin toss: Win or lose?</h5>
                    <div className="card-body" 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>
            {/* Right column */}
            <div className="col-md-6 pr-3 pl-1">
                <div className="card" style={{minHeight: "400px"}}>
                    <h5 className="card-header  bg-dark text-white text-center">The repeated risk</h5>
                    
                    <div id="drawnEarningsText" className="text-center">
                        Your accumulated earnings at this ball are <br></br> 
                        £{parseFloat(this.state.payment[this.state.drawn[this.state.drawn.length-1]]).toFixed(2)}
                    </div>
                    <div id="accumulatedEarnings" className="text-center d-none">
                    </div>

                    <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.mouseEnter} 
                            mouseLeave={this.mouseLeave}
                            drawn={this.state.drawn}
                            currentNode = {-1}
                            continuation={this.state.continuation} 
                            pulse={true}
                            initialColor = {"white"}
                            ClickHandler = {this.voidFunction}
                        />                            
                    </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.coinTossCounter >= 3) ?
                        <div className="col d-inline-flex justify-content-center align-items-center">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.nextCoin}>
                                    {(this.state.currentRound == 5) ? "Start anew" :
                                        "Next single risk"}
                            </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 d-inline-flex justify-content-center align-items-center" >
                            You moved down.
                        </div>
                    
                        {(this.state.coinTossCounter >= 3) ?
                        <div className="col d-inline-flex justify-content-center align-items-center">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.nextCoin}>
                                    {(this.state.currentRound == 5) ? "Start anew" :
                                        "Next single risk"}
                            </button>
                        </div> 
                        :<></>
                        }    
                    </div>
                </div>
            </div>  
        </div>

        { (this.state.coinTossCounter < 4) ? 
            <div className="row">
                <div id="explainDiv" className="col d-none">
                    <div id="explainText" className="alert alert-info"/>
                    
                    {((this.state.winningSide != "") && (this.state.nextCoin)) ?
                    <button type="button" id="nextCoinBtn" className="btn btn-primary px-3" style={{width:"35%"}} 
                        onClick={this.nextCoin}> Next single risk
                    </button>
                    :
                    <></>
                    }
                </div>
            </div>
        : <></>}
        </>
        )
    }

}