class DecoloringBonus extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          imagePathOutcome: '/static/img/coin_questionmark.png',
          imagePathGuess: '/static/img/coin.png',
          winningSide: "",
          payment: [],
          key: 0,
          modal: false,
          rightSide: "card", 
      }
      this.submitCoin = this.submitCoin.bind(this);
      this.winningSideUpdate = this.winningSideUpdate.bind(this);
      this.calculateEarnings = this.calculateEarnings.bind(this);
      this.submitCard = this.submitCard.bind(this);
      this.cardClickAnimation = this.cardClickAnimation.bind(this);
      this.nextCoin = this.nextCoin.bind(this);
      this.nextCard = this.nextCard.bind(this);
  }

  componentDidMount() {
    this.calculateEarnings();
    
    // Disable clicks in ball
    var balls = document.getElementsByClassName("ball")
    for(var i=0;i<balls.length;i++) {
        balls[i].disabled = true;
    }
    
    if (this.props.type == "card") {
        const cardID = "virtualCard_" + (this.props.previousValue - 1).toString()
        const lastOutcome = this.props.cardOutcome[this.props.roundNumber]
        let stopCard = (lastOutcome == "Stop")

        this.setState({
            rightSide: "card",
        }, () => {
            this.cardClickAnimation(cardID, lastOutcome, stopCard)
        })

    } else if (this.props.type == "coin"){
        this.setState({
            rightSide: "coin",
            imagePathGuess: this.props.imagePathGuess,
            imagePathOutcome: this.props.imagePathOutcome,
        },
        () => {
            
            if (this.props.imagePathGuess == this.props.imagePathOutcome) {
                document.getElementById("coinTossWon").classList.remove("d-none");
                document.getElementById("moveUp").classList.remove("d-none");
                document.getElementById("placeholderFooter").classList.add("d-none");
            } 
            else {
                document.getElementById("coinTossLost").classList.remove("d-none");
                document.getElementById("moveDown").classList.remove("d-none");
                document.getElementById("placeholderFooter").classList.add("d-none");
            }
            
            // Grey background for selection section
            document.getElementById("pickWinningSide").classList.remove("alert-warning");
            document.getElementById("pickWinningSide").classList.add("alert-secondary");

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

        if (this.props.roundNumber == 5) {
            // Payment
            const drawn = this.props.drawn || [0]
            const roundNumber = this.props.roundNumber || [0]
            const currentNode = drawn[roundNumber]
            const allPayment = this.calculateEarnings();
            const payment = allPayment[currentNode]

            liveSend({
                'type': "payment", 
                'value': payment
                })
            
            // Show payment information
            document.getElementById("nextCoinBtn").classList.add("d-none")
            document.getElementById("proceedBtnUpCol").classList.add("d-none")
            document.getElementById("proceedBtnDownCol").classList.add("d-none")
            document.getElementById("continueSection").classList.remove("d-none")
            document.getElementById("confirm_btn").removeAttribute('disabled');
        }
    }       
}

calculateEarnings = () => {
    const indArray = [
        [0],
        [1, 2],
        [3, 4, 5],
        [6, 7, 8, 9],
        [10, 11, 12, 13, 14],
        [15, 16, 17, 18, 19, 20]
        ]

    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})

    return payment
    }

// Submit coin toss
submitCoin() {
    liveSend({
        'type': "coin", 
        'value': this.state.winningSide
        })
}

  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'
            },() => {this.submitCoin()})
        } else if (chosenSide == "T") {
            this.setState({
                winningSide: chosenSide,
                imagePathGuess: '/static/img/coin_t.png'
            }, () => {this.submitCoin()})
        }

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

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

    submitCard(cardID) {
        // Submitted after button click post animation
        liveSend({
            'type': "card", 
            'value': parseInt(cardID.slice(-1)) + 1,
            })
    }

cardClickAnimation(cardID, cardOutcome, stopCard) {
    const cards = document
        .getElementById("cardContainer")
        .getElementsByClassName("virtualCard")
    
    const numWhiteCards = parseInt(this.props.currentProb / 10)
    const numBlackCards = 10 - numWhiteCards

    // Disable next button
    const visibleBtns = document
        .getElementsByClassName("btn-primary")
    
        for (let i=0; i < visibleBtns.length; i++) {
        visibleBtns[i].setAttribute("disabled", "disabled")
    }
    
    for (let i=0; i< cards.length; i++) {
        const currentID = cards[i].id
        const cardNum = parseInt(currentID.slice(-1)) + 1

        const assignedNumber = js_vars.cardNumbersDict[cardNum][this.props.roundNumber]

        if (assignedNumber <= numBlackCards) {
            // Black cards
            cards[i].style.background = "black"
            cards[i].style.color = "transparent"
        } else {
            cards[i].style.background = "white"
            cards[i].style.color = "transparent"
        }

        if (currentID == cardID) {
            cards[i].classList.add("card-grow")
            cards[i].style.zIndex = 100;
            cards[i].style.border = "3px solid #2E8BC0"

            $("#" + cardID).bind('animationend webkitAnimationEnd', 
                () => { 
                    // Enable buttons after animation end
                    if (stopCard) {
                        const drawn = this.props.drawn || [0]
                        const roundNumber = this.props.roundNumber || [0]
                        const currentNode = drawn[roundNumber]
                        const payment = this.state.payment[currentNode]

                        liveSend({
                            'type': "payment", 
                            'value': payment
                            })
                        
                        // Show payment information
                        document.getElementById("nextCoinBtn").classList.add("d-none")
                        document.getElementById("continueSection").classList.remove("d-none")
                        document.getElementById("confirm_btn").removeAttribute('disabled');
                    } else {
                        for (let i=0; i < visibleBtns.length; i++) {
                            visibleBtns[i].removeAttribute('disabled');
                        }
                    }
                } )
        }
    }

    // Show feedback in card display
    document.getElementById("cardFeedbackPlaceholder").classList.add("d-none")
    document.getElementById("cardFeedback").classList.remove("d-none")

    if (cardOutcome == "Stop") {
        document.getElementById("cardFeedbackText").innerHTML = "You drew a black card."            
    } else {
        document.getElementById("cardFeedbackText").innerHTML = "You drew a white card."
    }
}

nextCoin() {
    this.setState({
        rightSide:"coin"
    })
}

nextCard() {
    document.getElementById("moveUp").classList.add("d-none")
    document.getElementById("moveDown").classList.add("d-none")
    document.getElementById("placeholderFooter").classList.remove("d-none")
    this.setState({
        rightSide:"card"
    })
}

voidFunction(){
    return
}


  render() {

    // Find stop decision
    let submittedContinuation = this.props.continuationDec.slice(0,this.props.roundNumber + 1)
    let submittedStop = submittedContinuation.findIndex(element => element == "Stop")

    
    // Calculate accumulated earning to show
    let payment = 0
    if (submittedStop >= 0) {
        payment = parseFloat(this.state.payment[this.props.drawn[submittedStop]])
    } else {
        payment = parseFloat(this.state.payment[this.props.drawn[this.props.roundNumber]])
    }

    return(
        <>
        <div className="row">
            {/* Left column showing stopping strategy */}
            <div className="col-md-6 pl-3 pr-1">
                <div className="card" style={{
                    minHeight: "400px",
                    }}>
                    <h5 className="card-header  bg-dark text-white text-center">Your decoloring</h5>
                    <div id="accumulatedEarningsDiv" className="text-center">
                        Your current accumulated earnings are £{payment.toFixed(2)}.
                    </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
                            upTick = {js_vars.upTick} 
                            key = {this.state.key}
                            // ClickHandler={this.NodeClickHandler} Balls are disabled 
                            isClicked={js_vars.stopStrategy.isClicked} 
                            drawn={this.props.drawn || [0]}
                            continuation={js_vars.stopStrategy.continuation}
                            initialColor = {this.props.initialColor}
                            currentRound = {this.props.roundNumber}
                            continuationDec = {this.props.continuationDec}
                            ClickHandler = {this.voidFunction}
                            mouseEnter = {this.voidFunction}
                            mouseLeave = {this.voidFunction}
                            pulse = {true}
                        />
                    </div>
                    
                    {/* Footer */}
                    <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>

                        <div id="proceedBtnUpCol" className="col d-inline-flex justify-content-center align-items-center ">
                            <button type="button"
                                className="btn btn-primary px-3" 
                                onClick={this.nextCard}>
                                    Next card draw
                            </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>

                        <div id="proceedBtnDownCol" className="col d-inline-flex justify-content-center align-items-center ">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.nextCard}>
                                    Next card draw
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {/* Right column */}
            <div className="col-md-6 pr-3 pl-1">
            {
                (this.state.rightSide == "coin") ?
                    <CoinToss
                        imagePathGuess={this.state.imagePathGuess}
                        imagePathOutcome={this.state.imagePathOutcome}
                        winningSideUpdate = {this.winningSideUpdate}
                    />
                    :
                    (this.state.rightSide == "card") ?
                    <CardDeck 
                        probability = {100 - this.props.currentProb}
                        showNumber = {true}
                        clickable = {true}
                        clickHandler={this.submitCard}
                        inlineFeedback={true}
                        nextCoin = {this.nextCoin}
                        />
                :
                <></>
            }
            </div>
        </div>

        </>
    )
  }
}