class WalkingTask extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          rightSide: "instruction",
          rightSideHeader:"Your instruction at the pulsing ball",
          imagePathOutcome: '/static/img/coin_questionmark.png',
          imagePathGuess: '/static/img/coin.png',
          winningSide: "",
          payment: [],
          keyNum: 0,
          modal: false,
      }
      this.submitCoin = this.submitCoin.bind(this);
      this.nextBall = this.nextBall.bind(this);
      this.winningSideUpdate = this.winningSideUpdate.bind(this);
      this.calculateEarnings = this.calculateEarnings.bind(this);
      this.openModal = this.openModal.bind(this);
      this.closeModal = this.closeModal.bind(this);
      this.submitNodeInstruction = this.submitNodeInstruction.bind(this);
      this.cardClickAnimation = this.cardClickAnimation.bind(this);
      this.submitCard = this.submitCard.bind(this);
      this.nextCoin = this.nextCoin.bind(this);
      this.afterBonusBall = this.afterBonusBall.bind(this);
  }

  componentDidMount() {
    // Disable ball clicks
    var balls = document.getElementsByClassName("ball")
    for(var i=0;i<balls.length;i++) {
        balls[i].disabled = true;
    }

    // Hide earnings if practice round
    if (this.props.practiceRound) {
        document.getElementById("accumulatedEarningsDiv").style.visibility = "hidden"
    }

    // Determine component view
    if (this.props.roundNumber == 5) {
        // Disable further input
        document.getElementById("amountRange").setAttribute("disabled", "disabled")
        document.getElementById("amountInput").setAttribute("disabled", "disabled")
        
        const instructionsFooter = document.getElementById("randInstructCol").getElementsByClassName("card-footer")
        instructionsFooter[0].classList.add("d-none");

        // Move to next page if stopped before and not practice round
        if (this.props.cardOutcome.slice(0,this.props.roundNumber).includes("Stop") && 
            !this.props.practiceRound
        ) {
            // Hide risk info
            document.getElementById("riskInfo").classList.add("d-none")
            document.getElementById("risksToTake").classList.remove("d-none")
            
            document.getElementById("confirm_btn").classList.remove("d-none")
            setTimeout( () => {
                document.getElementById("confirm_btn").disabled = false;
            }, 1000)
        } 
        else if (!this.props.practiceRound) {
            this.openModal();

            // Add costly text if necessary
            if (this.props.costly && !this.props.practiceRound) {
                document.getElementById("decoloringCostInfo").classList.add("d-none")
                document.getElementById("costlyDecoloring").innerHTML = `
                    less the cost for using numbered balls of £${this.props.decoloringCosts}, 
                    `   
            }
            // Hide risk info
            document.getElementById("riskInfo").classList.add("d-none")
        } else {
            document.getElementById("confirm_btn").classList.remove("d-none")
            document.getElementById("confirm_btn").disabled = false;
            document.getElementById("remainingRounds").classList.add("d-none")
            document.getElementById("nextScreen").classList.remove("d-none")
            document.getElementById("accumulatedEarningsDiv").style.visibility = "hidden"
            document.getElementById("task").classList.add("d-none")

            if ( ! this.props.cardOutcome.slice(0,this.props.roundNumber).includes("Stop")){
                // Only stop in last round
                // Include information about five risks for all Walking Tasks
                document.getElementById("fiveRisks").classList.remove("d-none")
            }

        }
    } else if (this.props.type == "nodeChoice") {
        // Last decision was instruction
        // Card drawing must be next
        this.setState({
            rightSide: "card",
        })
    } else if (this.props.type == "card") {
        // Card was clicked before, show animation
        const cardID = "virtualCard_" + (this.props.previousValue - 1).toString()
        const lastOutcome = this.props.cardOutcome[this.props.roundNumber]
        let stopCard = (lastOutcome == "Stop")

        if (this.props.roundNumber > 0 && this.props.cardOutcome.slice(0, this.props.roundNumber).includes("Stop")){
            stopCard = false
        }

        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.cardOutcome.slice(0,this.props.roundNumber).includes("Stop") && this.props.roundNumber < 5
    ) {this.afterBonusBall();}

    this.calculateEarnings();

    }

openModal() {
    this.setState({ 
        modal: true,
        keyNum: 4
    })
    document.getElementById("lineSVG").id="lineSVG_main"
} 

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

afterBonusBall() {
    document.getElementById("risksToTake").classList.remove("d-none")
    
    if (this.props.practiceRound) {
        $('#moreRisks').collapse('show')
        document.getElementById("task").classList.add("d-none")
    } else {
        document.getElementById("riskInfo").classList.add("d-none")

        if (this.props.costly) {
            document.getElementById("decoloringCostInfo").classList.add("d-none")
        }
    }
    
    document.getElementById("accumulatedEarningsDiv").style.visibility = "hidden"

    if (this.props.type == "coin") {
        this.setState({
            imagePathGuess: this.props.imagePathGuess,
            imagePathOutcome: '/static/img/coin_questionmark.png',
        }, () => {
            document.getElementById("placeholderFooter").classList.add("d-none");
            document.getElementById("noFeedback").classList.remove("d-none");
            // Hide Feedback sections
            document.getElementById("coinTossLost").classList.add("d-none");
            document.getElementById("moveDown").classList.add("d-none");
            document.getElementById("coinTossWon").classList.add("d-none");
            document.getElementById("moveUp").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;
            }
        })
    }

    this.setState({
        rightSideHeader: "Your instruction"
    })
}

nextBall() {
    //document.getElementById("nextCoinBtn").classList.add("d-none")
    document.getElementById("moveUp").classList.add("d-none")
    document.getElementById("moveDown").classList.add("d-none")
    document.getElementById("noFeedback").classList.add("d-none")
    document.getElementById("placeholderFooter").classList.remove("d-none")

    this.setState({
        rightSide: "instruction",
        imagePathOutcome: '/static/img/coin_questionmark.png',
        imagePathGuess: '/static/img/coin.png',
        winningSide: "",
    })
    
}

submitNodeInstruction(continuationProb) {
    // Submit changed choice

    liveSend({
        'type': "nodeChoice", 
        'value': continuationProb,
        })

    this.setState({
        rightSide: "card"
    })
}

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) {
                        this.openModal();
                    } 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."
    }

}

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


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

    voidFunction() {
        return
    }

    closeModal(){
        this.setState({ 
            //keyNum: 1,
            rightSide: "coin",
            modal:false}, () => {
                this.afterBonusBall();

                if (this.props.practiceRound) {
                    // Disable coin click
                    for (let radio of document.querySelectorAll('input[type=radio]')) {
                        radio.disabled = true;
                    }
                    document.getElementById("pickWinningSide").classList.remove("alert-warning")
                    document.getElementById("pickWinningSide").classList.add("alert-secondary")

                    setTimeout( () => {
                        for (let radio of document.querySelectorAll('input[type=radio]')) {
                            radio.disabled = false;
                        }
                        document.getElementById("pickWinningSide").classList.remove("alert-secondary")
                        document.getElementById("pickWinningSide").classList.add("alert-warning")
                    }, 5000)
                }
            }) 
    }

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

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

    // Write payment to main page
    if (! this.props.practiceRound) {
        document.getElementById("finPay1").innerHTML = payment.toFixed(2)
    }

    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"
                    }}>
                        { (! this.state.modal) ?
                        <>
                            <svg id="lineSVG" 
                                style={{ 
                                    position: "absolute",
                                    left: "0",
                                    top:"0",
                                    height: "100%",
                                    width: "100%"
                            }}/>
                            <DecisionTree
                                upTick = {js_vars.upTick} 
                                key = {this.state.keyNum}
                                isClicked={js_vars.stopStrategy.isClicked} 
                                drawn={this.props.drawn || [0]}
                                continuation={this.props.plotStopStrategy}
                                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="noFeedback" 
                        className="card-footer alert 
                                    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 ">
                            <button type="button" 
                                className="btn btn-primary" 
                                onClick={this.nextBall}>
                                    Next instruction
                            </button>
                        </div>
                    </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",
                            }}>

                        { !(this.props.continuationDec.slice(0,5).includes("Stop")) ? 
                            <div className="col text-center d-inline-flex justify-content-center align-items-center" >
                                You moved up.
                            </div>
                        : <></>}

                        <div className="col d-inline-flex justify-content-center align-items-center ">
                            <button type="button" 
                                className="btn btn-primary" 
                                onClick={this.nextBall}>
                                    Next instruction
                            </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",
                            }}>

                        { !(this.props.continuationDec.slice(0,5).includes("Stop")) ?
                        <div className="col d-inline-flex justify-content-center align-items-center" >
                            You moved down.
                        </div>
                        : <></>}

                        <div className="col d-inline-flex justify-content-center align-items-center ">
                            <button type="button" 
                                className="btn btn-primary px-3" 
                                onClick={this.nextBall}>
                                    Next instruction
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {/* Right column */}
            {this.state.rightSide == "instruction" ? 
                <RandNodeChoice 
                    isClicked = {true} // All buttons have been clicked
                    continuation = {this.props.currentProb}
                    header = {this.state.rightSideHeader}
                    walkingTask = {true}
                    submitMe = {this.submitNodeInstruction}
                    closeMe = {this.voidFunction}
                /> 
            :
            (this.state.rightSide == "coin") ?
                <div className="col-md-6 pr-3 pl-1">
                    <CoinToss
                        imagePathGuess={this.state.imagePathGuess}
                        imagePathOutcome={this.state.imagePathOutcome}
                        winningSideUpdate = {this.winningSideUpdate}
                    />
                </div>
                :
            (this.state.rightSide == "card") ?
                <div className="col-md-6 pr-3 pl-1">
                    <CardDeck 
                        probability = {100 - this.props.currentProb}
                        showNumber = {true}
                        clickable = {true}
                        clickHandler={this.submitCard}
                        inlineFeedback={true}
                        nextCoin = {this.nextCoin}
                    />
                </div>
                :
                <></>
            }

        </div>

        <BonusModal 
            key = {this.state.keyNum} 
            show = {this.state.modal}
            keyNum = {this.state.keyNum}
            payment = {payment}
            endowment = {this.props.endowment || "£1.50"}
            drawn={this.props.drawn || [0]}
            currentRound = {this.props.roundNumber}
            continuationDec = {this.props.continuationDec}
            closeModal = {this.closeModal}
            practiceRound = {this.props.practiceRound}
            costly = {this.props.costly}
            decoloringCosts = {this.props.decoloringCosts}
        />
        </>
    )
  }
}


class BonusModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyForTriangle: 0,
        }
    }

    componentDidMount() {
        this.setState({keyForTriangle: 5}, () => {
            if (this.props.show) {
                const balls = document
                    .getElementById("cardBodyModal")
                    .getElementsByClassName("ball")
                
                for (let i=0; i < balls.length; i++){
                    balls[i].style.cursor = 'not-allowed';
                    balls[i].setAttribute("disabled", "disabled");
                }
            }
        })
    }

    voidFunction() {
        return;
    }

    render() {
        if(!this.props.show){
            return null;
        } else {
            $('#staticBackdrop').modal("show")
        }
      return (
      <>
        <div className="modal" id="staticBackdrop" 
         data-bs-backdrop="static" 
         data-bs-keyboard="false" 
         tabIndex="-1" 
         aria-labelledby="staticBackdropLabel"
         aria-hidden="true">
         <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content">
                <div className="modal-header">
                {this.props.practiceRound ? 
                    <h5 className="modal-title" id="bonusModalLongTitle">Your bonus for a Walking Task</h5>    
                    :
                    <h5 className="modal-title" id="bonusModalLongTitle">Your bonus for Walking Task {js_vars.taskNumber}</h5>
                }
                  
                </div>
              <div className="modal-body">
                <div className="row">
                    {this.props.practiceRound && ! this.props.costly ? 
                    <div className="col">
                        If a Walking Task is your bonus task, your bonus equals the accumulated
                        earnings at the bonus ball, plus your endowment.
                    </div>    
                    : this.props.practiceRound && this.props.costly ?
                    <div className="col">
                        If a Walking Task is your bonus task, your bonus equals the accumulated
                        earnings at the bonus ball less the costs for using numbered balls plus your endowment.
                    </div>   
                    : !this.props.practiceRound && this.props.costly ? 
                    <div className="col">
                        Your bonus equals the accumulated
                        earnings of £{this.props.payment.toFixed(2)} less the costs for 
                        using numbered balls of £{this.props.decoloringCosts} plus the endowment of {this.props.endowment} if
                        Walking Task {js_vars.taskNumber} is your bonus task.
                    </div>    
                    :
                    <div className="col">
                        Your bonus equals the accumulated
                        earnings of £{this.props.payment.toFixed(2)} plus the endowment of {this.props.endowment} if 
                        Walking Task {js_vars.taskNumber} is your bonus task.
                    </div>    
                }
                </div>

                <div className="row mt-2 mb-3">
                    <div className="col-md-6 offset-md-3 pl-3 pr-1">
                        <div className="card" style={{minHeight: "400px"}}>
                            <h5 className="card-header  bg-dark text-white text-center">Your decoloring</h5>
                            <div className="card-body" id="cardBodyModal" style={{
                                    height: "250px",
                                    width: "300px",
                                    position: "relative",
                                    margin: "0 auto",
                                    cursor: "not-allowed",
                            }}>
                                <svg id="lineSVG" 
                                    style={{ 
                                        position: "absolute",
                                        left: "0",
                                        top:"0",
                                        height: "100%",
                                        width: "100%"
                                }}/>
                                <DecisionTree
                                    upTick = {js_vars.upTick} 
                                    key = {this.state.keyForTriangle}
                                    isClicked={js_vars.stopStrategy.isClicked} 
                                    drawn={this.props.drawn || [0]}
                                    continuation={js_vars.stopStrategy.continuation}
                                    currentRound = {this.props.currentRound}
                                    continuationDec = {this.props.continuationDec}
                                    pulse = {false}
                                    initialColor = {this.props.initialColor} 
                                    mouseEnter = {this.voidFunction}
                                    mouseLeave = {this.voidFunction}
                                />

                            </div>
                        </div>
                    </div>
                </div>
              </div>
              <div className="modal-footer justify-content-center">
                { this.props.currentRound < 5 ? 
                <button type="button" className="btn btn-primary" 
                    data-bs-dismiss="modal"
                    onClick = {this.props.closeModal}
                    >Okay
                </button>
                :
                <button className="btn btn-primary" 
                    >
                        {js_vars.taskNumber == 10 ?
                        <>
                            Continue
                        </>
                        :
                        <>
                            Next task
                        </>
                    }
                </button>
                }
              </div>
            </div>
          </div>
        </div>
      </>
    )}
  }