class CardDeck extends React.Component {
  constructor(props) {
      super(props);
  }

  componentDidMount() {
    const cardHeight = 60 
    const numRows = 2 // 5 cards per row, 10 cards

    document.getElementById("cardContainer").style.height = ((numRows + 0.5) * cardHeight).toString() + "px"
  }

  drawCards() {
      const array = []
      const whiteCards = Math.trunc(this.props.probability / 10)
      let style
      const cardPerRow = 5
      const cardHeight = 60 

      // Place cards in containers to vertically align container
      for (let card=0; card <10; card ++){
        let row = Math.floor(card/cardPerRow);
        let column = card % cardPerRow;

        let style = {
            width: "40px", 
            height: cardHeight + "px",
            border: "0.5px solid black",
            display: "block",
            position: 'absolute', 
            //top: (row * 66).toString() + '%',
            left: (column * (100 / cardPerRow)).toString() + '%',
            paddingLeft: "0px",
            paddingRight: "0px",
            paddingTop: "0px",
            paddingBottom: "0px",
            zIndex: 1,
        }

        if (row == 0) {
            style.top=0 + "px"
        } else if (row==1) {
            style.top = (1.5 * cardHeight).toString() + "px"
        }

        if (this.props.clickable) {
            style.fontSize = 20
      
            let greyScheme = {
                0 : "#F5F5F5",
                10: "#E8E8E8",
                20: "#DCDCDC",
                30: "#D3D3D3",
                40: "#C0C0C0",
                50: "#BEBEBE",
                60: "#A9A9A9",
                70: "#989898",
                80: "#808080",
                90: "#696969",
                100: "#606060",
            }

            style.backgroundColor = greyScheme[whiteCards * 10]
      
            if (whiteCards >= 8) {
                style.color = "white"
            } else {
                style.color = "black" // Show probability inside node
            }
    
            let id="virtualCard_"+card

            let cardNumber = ""
            if (this.props.showNumber) {
                cardNumber = card + 1
            }
            
            array.push(<button type="button" className="virtualCard" 
                id={id} key={card} style={style} onClick={(e) => this.props.clickHandler(e.target.id)}>{cardNumber}</button>)
          
            } else {
                if (card >= whiteCards) {
                    style.backgroundColor = "black"
                } else {
                    style.backgroundColor = "white"
                }

                array.push(<button className="virtualCard"  key={card} style={style} disabled></button>)
            }
        }

      return array
  }

render() {
  return(
        <div className="card h-100" id="cardDeck-widget" style={{
            minHeight: "200px",
            }}>
            <h5 className="card-header bg-dark text-white text-center">Card draw: Stop or continue?</h5>
            <div className="card-body d-flex flex-colum align-items-center" id="cardShow" style={{
                maxHeight: "500px",
                width: "300px",
                margin: "0 auto",
            }}>
                <div id="cardContainer" className="d-flex justify-content-between"
                    style={{
                        width:"100%",
                        position: "relative",
                    }}>
                    {this.drawCards()}
                </div>
            </div>

            {this.props.inlineFeedback ? 
            <>
            <div id="cardFeedbackPlaceholder"
                style={{
                    height: "60px",
                    marginBottom:"0px",
                }}>
            </div>

            <div id="cardFeedback" 
                className="card-footer alert alert-dark 
                            d-flex justify-content-center align-items-center d-none" 
                style={{
                    height: "60px",
                    marginBottom:"0px",
                    }}>
                
                <div id="cardFeedbackText" className="col d-flex justify-content-center align-items-center" >
                </div>

                <div id="nextCoinBtn" className="col d-flex justify-content-center align-items-center" >
                    <button type="button" className="btn btn-primary" 
                        onClick={this.props.nextCoin}>
                            Next coin toss
                    </button>
                </div>
            </div>
            </>
            : 
            <div id="placeholderCardFooter" 
                style={{
                    height: "60px",
                    marginBottom:"0px",
                }}>
            </div>
            }
        </div>
  )
}

}