// Create class
class CardDeck extends React.Component {
    constructor(props) {
        super(props);
    }
    
    componentDidMount() {
        for (let i = 0; i <=99; i++) {
            var row = Math.floor(i/10);
            var column = i % 10;

            const id="virtualCard_"+i
            const thisCard = document.getElementById(id)

            thisCard.style.top = row * 10 + '%';
            thisCard.style.left = column * 10 + '%';
        }
    }
    
    getCards() {
        const array = []
        //const highCards = this.props.probabilities[0] * 100 -1
        //const highPayoff = this.props.payoffs[0]
        //const lowPayoff = this.props.payoffs[1]

        /*
        const fillColors = [
            "#bfd6f6",    //blueish
            "#ffefd7",    //yellowish
        ]
        */
  
        for (let i = 0; i <=99; i++) {
            let id="virtualCard_"+ i
            
            /*
            let addClass = ""
            let text = ""
            if (highCards >= i) {
                if (isNaN(highPayoff)) {
                    text = highPayoff     
                    addClass = "playCard"
                } else{ 
                    text = highPayoff
                    addClass = "playCard highCard"
                }
                
                
            } else {
                if (isNaN(lowPayoff)) {
                    text = lowPayoff     
                    addClass = "playCard"
                } else{ 
                    text = lowPayoff
                    addClass = "playCard lowCard"
                }
                
            }
            */
            
            array.push(
                <button type="button" className="playCard" id={id} key={i} disabled>{i+1}</button>)
        }
        
        return array
    }

    getRiskText() {
        let highProb = this.props.probabilities[0]
        let lowProb = ""
        
        const highPayoff = this.props.payoffs[0]
        const lowPayoff = this.props.payoffs[1]

        let topLine = ""
        let middleLine = ""
        let lowerLine = ""
        let rowWeight = ""
        
        
        if (!isNaN(highProb)) {
            lowProb = (highProb * 100 + 1).toFixed(0)
            highProb = (highProb * 100).toFixed(0)
            topLine = "Risk with " + highProb + " winning cards";
            middleLine = "Cards 1 to " +  highProb + " yield " + highPayoff
            lowerLine = "Cards " + lowProb + " to 100 yield " + lowPayoff
        } else {
            middleLine = "High outcome:  " + highPayoff
            lowerLine = "Low outcome:  " + lowPayoff
            rowWeight = "bolder"
        }
        
        
        return (
            <div className="row textRow text-center" >
                <div className="col-12 d-flex align-items-top justify-content-center" 
                    style={{padding:"0 0 0 0"}}>
                    <table>
                        <tbody>
                        {topLine && 
                        <tr style={{fontWeight:"bolder"}}>
                            <td> {topLine} </td>
                        </tr>}
                        <tr style={{fontWeight:rowWeight}}>
                            <td>{middleLine}</td>
                        </tr>
                        <tr style={{fontWeight:rowWeight}}>
                            <td>{lowerLine}</td>
                        </tr>
                        </tbody>
                    </table>
                    
                </div>
            </div>
        );
    }

  
  render() {
    return(
        <div className="container">
            {this.props.resolution ? <></>: this.getRiskText()}
            <div className="row">
                <div className="col-12 cardContainer">
                {this.getCards()}
                </div>
            </div> 
        </div>
    )
  }
  
  }