class CoinToss extends React.Component {
    constructor(props) {
        super(props); 
        this.state = {
            imagePath: '/static/img/coin.png',
            imagePathGuess: '/static/img/coin.png',
        }
    }
    render() {
        return (
        <>
        <div className="card h-100" 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.props.imagePathGuess} style={{
                                height: "100px"
                            }}/>
                        </td>

                        <td id="coinTossOutcome" className="align-middle text-center" style={{width:"50%"}}>
                            <img src={this.props.imagePathOutcome} style={{
                                height: "100px"
                            }}/>
                        </td>
                    </tr>

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

                    <tr id="pickWinningSide" className="alert alert-warning text-center">
                        <td colSpan="2">
                            {/*
                            <p>Please enter the coin toss outcome:</p>
                            */}

                            <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.props.winningSideUpdate("H")}
                                            className="largerRadio"/>
                                    </td>
                                    <td>
                                        <input type="radio" name="winningSideInput" id="winningSideInput_T" value="T" 
                                            onClick={() => this.props.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>
        </>
        
        )   
}
}