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

class CoinTossPanel extends React.Component {
    constructor(props) {
        super(props); 
        this.state = {
            // Check whether all nodes are clicked
            isClicked: [
                true,
                true, true,
            ],
            // Save continuation decision in percent
            continuation: [
                100,
            ],
            // Save outcome path
            drawn: -1,
            coinTossCounter: 0, // Keep track of clicks
            enableCoinToss: false, // Enable Coin Toss
            imagePathGuess: '/static/img/coin.png',
            imagePath: '/static/img/coin_questionmark.png',
            winningSide: "",
            lastRiskWon: "",
            nextCoin: false,
            riskOutcome: [],
            coinTossOutcome: [],
        }
        this.tryCoin = this.tryCoin.bind(this);
        this.coin = this.coin.bind(this);
        this.tossCoin = this.tossCoin.bind(this);
        this.nextCoin = this.nextCoin.bind(this);
        this.winningSideUpdate = this.winningSideUpdate.bind(this);
        this.fastCoinTosses = this.fastCoinTosses.bind(this);
        this.submitData = this.submitData.bind(this);
    }

    tryCoin() {
        this.setState({enableCoinToss: true},
            () => {
                document.getElementById("tryCoinBtn").classList.add("d-none")
                document.getElementById("pickWinningSide").classList.remove("d-none")
            })
    }

    winningSideUpdate(chosenSide) {

        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'
            })
        }
    
        if (this.state.coinTossCounter >= 2) {
            setTimeout(this.tossCoin, 500)
        } else {
            document.getElementById("explainDiv").classList.remove("d-none")

            document.getElementById("explainText").innerHTML = `    
                    You entered 
                    <b>${chosenSide == "H" ? "Heads" : "Tails"}</b> 
                    as your coin toss outcome.
                    Therefore, the left coin shows 
                    ''<b>${chosenSide}</b>''.</br>
                    Next, you will see the winning side.
                `
            document.getElementById("nextCoinBtn").classList.remove("d-none");
        }

        
    }

    tossCoin() {
        const userInput = this.state.winningSide
        const lastRiskWon = this.state.lastRiskWon
        let {coinTossCounter, riskOutcome, coinTossOutcome} = this.state

        coinTossOutcome.push(userInput)


        // 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()

        // Make outcome not random for second and fourth coin
        if (coinTossCounter + 1 == 2 || coinTossCounter + 1 == 4){
            if (lastRiskWon) {
                if (userInput == "H") {
                    coinOutcome = "T"
                } else {
                    coinOutcome = "H"
                }
            } else {
                // Win this risk
                coinOutcome = userInput
            }
        }

        if (userInput == coinOutcome) {
            riskOutcome.push("W")
            document.getElementById("coinTossWon").classList.remove("d-none")
            document.getElementById("moveUp").classList.remove("d-none")
            document.getElementById("ball_1_text").classList.add("alert-success")
            this.setState({drawn: 1})
            document.getElementById("explainText").innerHTML = `
                The coin toss outcome equals the winning side! Therefore,
                you win this single risk and  
                receive £${js_vars.upTick.toFixed(2)}.
                ${(coinTossCounter + 1 == 2) ? 
                    "<br><strong>From now on, we omit the explanations.</strong>"
                : "" }
            `
        } else {
            riskOutcome.push("L")
            document.getElementById("coinTossLost").classList.remove("d-none")
            document.getElementById("moveDown").classList.remove("d-none")
            document.getElementById("ball_2_text").classList.add("alert-danger")
            this.setState({drawn: 2})
            document.getElementById("explainText").innerHTML = `
                The coin toss outcome does not equal the winning side! Therefore,
                you lose this single risk and  
                pay £${js_vars.upTick.toFixed(2)}.
                ${(coinTossCounter + 1 == 2) ? 
                    "</br><strong>From now on, we omit the explanations.</strong>"
                : "" }
            `
        }

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

            if (this.state.coinTossCounter >= 4) {
                this.props.fourCoinTosses() // Callback function for HTML page
            } else if (this.state.coinTossCounter > 2) {
                document.getElementById("explainText").classList.add("d-none")
            } 
        })
    }

    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,
            drawn: -1,
        })

        document.getElementById("ball_1_text").classList.remove("alert-success")
        document.getElementById("ball_2_text").classList.remove("alert-danger")
        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("explainDiv").classList.add("d-none")
        
        if (document.getElementById("nextCoinBtn")) { 
            document.getElementById("nextCoinBtn").classList.add("d-none")
        }
        //document.getElementById("pickWinningSide").classList.remove("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;
        }

        this.submitData(); // submits risk outcomes
    }

    fastCoinTosses() {
        document.getElementById("noExplanationsBtn").classList.add("d-none")
        document.getElementById("noExplanations").classList.add("d-none")

        this.nextCoin();
    } 

    // 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">
            {this.state.enableCoinToss ?
                    <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: "bottom", 
                                    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 d-none">
                                        <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" value="H"
                                                            onClick={() => this.winningSideUpdate("H")}
                                                            className="largerRadio"/>
                                                    </td>
                                                    <td>
                                                        <input type="radio" name="winningSideInput" 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 className="card" style={{minHeight: "400px"}}>
                    {/* Starting picture showing coin*/ }
                        <h5 className="card-header bg-dark text-white text-center">Coin toss</h5>
                        <div className="card-body d-flex align-middle text-center" style={{
                            height: "250px",
                            width: "300px",
                            position: "relative",
                            margin: "0 auto"
                        }}>
                            <table style={{
                                    width:"100%", 
                                    alignSelf: "center", 
                                    position: "relative", 
                                    margin: "0 auto",
                                    }}>
                                <tbody>
                                    <tr>
                                        <td className="align-middle text-center" style={{width:"50%"}}>
                                            <img src='/static/img/coin_h.png' style={{
                                                height: "100px"
                                            }}/>
                                        </td>
                                        <td className="align-middle text-center" style={{width:"50%"}}>
                                            <img src='/static/img/coin_t.png' style={{
                                                height: "100px"
                                            }}/>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                    </div>

            }
            </div> 
            
            {/* Right column */}
            <div className="col-md-6 pr-3 pl-1">
                <div className="card" id="singleRisk-widget" style={{minHeight: "400px"}}>
                        <h5 className="card-header  bg-dark text-white text-center">
                            {((this.state.winningSide != "") && (this.state.nextCoin)) ? 
                                "Single risk outcome"
                                :
                                "Single risk"
                            }
                        </h5>
                        <div className="card-body" style={{
                                height: "250px",
                                width: "400px",
                                position: "relative",
                                margin: "0 auto"
                            }}>
                            <TriangleSingleRisk 
                                upTick = {js_vars.upTick} 
                                isClicked={this.state.isClicked} 
                                drawn={this.state.drawn}
                                currentNode = {-1}
                                continuation={this.state.continuation} 
                                />
                        </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 > 2) ?
                            <div className="col">
                                <button type="button" 
                                    className="btn btn-primary px-3" 
                                    onClick={this.nextCoin}>
                                    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 > 2) ?
                            <div className="col">
                                <button type="button" 
                                    className="btn btn-primary px-3" 
                                    onClick={this.nextCoin}>
                                    Next single risk
                                </button>
                            </div> 
                            : <></>}
                        </div>

                    </div>

            
            </div> 
        </div> 

        <div id="explainDiv" className="row d-none">
            <div className="col">
                <div id="explainText" className="alert alert-info">
                </div>

                {((this.state.winningSide != "") && (this.state.nextCoin) && (this.state.coinTossCounter <= 2)) ?
                <button type="button" id="nextCoinBtn" className="btn btn-primary px-3" style={{width:"35%"}} 
                    onClick={this.nextCoin}> Resolve another single risk
                </button>
                :
                (this.state.coinTossCounter < 2) ?
                <button type="button" id="nextCoinBtn" className="btn btn-primary px-3" style={{width:"35%"}} 
                    onClick={this.tossCoin}> Show the winning side
                </button>
                :
                <></>
                }
            </div>
        </div>

        <div className="row">
            <div className="col">
                <button type="button" id="tryCoinBtn" className="btn btn-primary px-3"
                    onClick={this.tryCoin}> 
                    Start resolving single risks
                </button>
            </div>
        </div>

        </>          
        )
    }
}