// Note: We keep the data and the states in this component

class ChoiceSituationWrapper extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        // Check whether all nodes are clicked
        isClicked: [
            false,
            false, false,
            false, false, false,
            false, false, false, false,
            false, false, false, false, false
        ],
        // Save continuation decision in percent
        continuation: [
            100,
            100, 100,
            100, 100, 100,
            100, 100, 100, 100,
            100, 100, 100, 100, 100,
            100, 100, 100, 100, 100, 100,
            // 1, 1, 1, 1, 1, 1, 1
            // 1, 1, 1, 1, 1, 1, 1, 1
        ],
        isStopBall: [
            false,
            false, false,
            false, false, false,
            false, false, false, false,
            false, false, false, false, false
        ],
        // Save outcome path
        drawn: [],
        indArray: [
            [0],
            [1, 2],
            [3, 4, 5],
            [6, 7, 8, 9],
            [10, 11, 12, 13, 14],
            [15, 16, 17, 18, 19, 20]
          ],
        path: {},
        pdStopDecision : {},
        clickCounter: 0, // Keep track of clicks
        currentNode: -1, // Keep track of currently clicked node
        nodeChoiceShow: false, // Show Choice Section
        showPDChoice: false, // Show Node Choice for Path Dependent Choice
        showRandChoice: false, // Show Node Choice for Randomized Choice
        }
        this.decoloringInstructions = this.decoloringInstructions.bind(this);
        this.RiskComps = this.RiskComps.bind(this);
        this.basicInstructionsComps = this.basicInstructionsComps.bind(this);
        this.pathInstructionsComps = this.pathInstructionsComps.bind(this);
        this.randInstructionsComp = this.randInstructionsComp.bind(this);
        this.allowPointer = this.allowPointer.bind(this);
        this.hidePointer = this.hidePointer.bind(this);
        this.updatePDStop = this.updatePDStop.bind(this);
        this.radioClick = this.radioClick.bind(this);
        this.submitData = this.submitData.bind(this);
  }

    componentDidMount() {
        // Balls are disabled
        this.hidePointer()    
        
        // Select what is shown/possible in the triangle
        if (this.props.whatToShow == 0) {
            // Risk comp
            this.RiskComps()
        } else if (this.props.whatToShow == 1 || this.props.whatToShow == 3 || this.props.whatToShow == 5) {
            this.decoloringInstructions();
        } else if (this.props.whatToShow == 2) {
            this.basicInstructionsComps();
        } else if (this.props.whatToShow == 4) {
            this.pathInstructionsComps();
        } else if (this.props.whatToShow == 6) {
            this.randInstructionsComp();
        }

    }

    NodeClickHandler = (currentNode) => {
        if (this.props.whatToShow === 3) {
            this.setState({
                showPDChoice: true,
                currentNode: currentNode,
            })
        } else if (this.props.whatToShow === 5) {
            this.setState({
                showRandChoice: true,
                currentNode: currentNode,
            },
            () => {
                document.getElementById("choice-widget").scrollIntoView({
                    block: "end"
                })
            })
        } else if ( this.props.whatToShow === 0 || 
                    this.props.whatToShow === 2 || 
                    this.props.whatToShow === 4 ||
                    this.props.whatToShow === 6
        ) {
            return 
        } else {
            this.setState({
                nodeChoiceShow: true,
                currentNode: currentNode,
            },
            () => {
                document.getElementById("choice-widget").scrollIntoView({
                    block: "end"
                })
            })
        }

        this.hidePointer(); 

    }
    
    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // Functions to block/ unblock tree coloring
    allowPointer () {
        var balls = document.getElementsByClassName('ball');
        for (var i = 0; i < balls.length; i++) {
            balls[i].style.cursor = 'pointer';
            balls[i].disabled = false;
            } 
        document.getElementById("input-widget").style.cursor = 'auto'; 
    }

    hidePointer() {
        var balls = document.getElementsByClassName('ball');
        for (var i = 0; i < balls.length; i++) {
            balls[i].style.cursor = 'not-allowed';
            balls[i].disabled = true;
            } 
        document.getElementById("input-widget").style.cursor = 'not-allowed'; 
    }

    allButtonsClicked = () => {
        const {isClicked} = this.state;

        if (isClicked.filter(Boolean).length >= 3) {
            this.props.allColored()
        }
    }
    
    allButtonsClickedPD = () => {
        const {isClicked} = this.state;

        let interior = [4, 7, 8, 11, 12, 13]
        let outer = [0, 1, 2, 3, 5, 6, 9, 10, 14]

        let interiorBool = interior.map(e => isClicked[e])
        let outerBool = outer.map(e => isClicked[e])

        if (isClicked.filter(Boolean).length >= 3 
            && interiorBool.includes(true) 
            && outerBool.includes(true) ) {
            this.props.allColored()
        }
    }

    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // Functions to submit choice pop

    submitNodeChoice = (probContinue) =>{
        const { isClicked, continuation, currentNode, clickCounter} = this.state;
        
        isClicked[currentNode] = true
        continuation[currentNode] = probContinue

        this.setState({
            nodeChoiceShow: false,
            showRandChoice: false,
            isClicked,
            continuation,
            clickCounter: clickCounter +1,
            currentNode: -1,
        })

        this.allowPointer();
        this.submitData();

        if (this.props.whatToShow == 4) {
            this.allButtonsClickedPD() // test if three buttons have been clicked, one outer, one inner
        } else {
            this.allButtonsClicked() // test if three buttons have been clicked 
        }
    }

    closeNodeChoice = () => {
        this.setState({
            nodeChoiceShow: false,
            showPDChoice: false,
            showRandChoice: false,
            currentNode: -1,
        })

        this.allowPointer();
    }

    radioClick() {
        const {currentNode} = this.state
        const allPaths = js_vars.allPaths[currentNode]

        const clickedRadios = document
            .getElementById("pdInstructCol")
            .querySelectorAll('input[type=radio]:checked');

        if (allPaths.length == clickedRadios.length) {
            setTimeout(() => { 
                this.updatePDStop(clickedRadios);
              }, 200); 
        }
    }

    updatePDStop(clickedRadios) {
        const { isClicked, continuation, currentNode} = this.state;
        let {pdStopDecision} = this.state
        let allStop = true
        let allContinue = true

        for (let i=0; i< clickedRadios.length; i++){
            let thisRadio = clickedRadios[i];
            let path = thisRadio.name
            let decision = thisRadio.value
            
            if (decision == "Stop") {
                allContinue = false 
            } else if (decision == "Continue") {
                allStop = false 
            }
            
            pdStopDecision[path] = decision
        }

        let probContinue = -100
        if (allStop) {
            probContinue = 0
        } else if (allContinue) {
            probContinue = 100
        }

        isClicked[currentNode] = true
        continuation[currentNode] = probContinue

        this.setState({
            isClicked,
            continuation,
            clickCounter: this.state.clickCounter +1,
            currentNode: -1,
            pdStopDecision:pdStopDecision,
            showPDChoice: false,
            currentNode: -1,
        }, () => {
            this.allButtonsClickedPD()
        })

        this.allowPointer();
        this.submitData();
    }

    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // FUNCTIONS FOR COMPREHENSION QUESTIONS

    decoloringInstructions() {
        this.setState({
            isClicked: [
                false,
                false, false,
                false, false, false,
                false, false, false, false,
                false, false, false, false, false
            ],
            // Save continuation decision in percent
            continuation: [
                100,
                100, 100,
                100, 100, 100,
                100, 100, 100, 100,
                100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
        })

        this.allowPointer();
    }
    
    RiskComps() {
        this.setState({
            isClicked: [
                true,
                true, true,
                true, true, true,
                true, true, true, true,
                true, true, true, true, true
            ],
            // Save continuation decision in percent
            continuation: [
                100,
                100, 100,
                100, 100, 100,
                100, 100, 100, 100,
                100, 100, 100, 100, 100,
                100, 100, 100, 100, 100, 100,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
        })

        document.getElementById("instructionHeader").innerHTML = 'The repeated risk'
    }

    basicInstructionsComps() {
        this.setState({
            isClicked: [
                true,
                true, true,
                true, true, true,
                true, true, true, true,
                true, true, true, true, true
            ],
            // Save continuation decision in percent
            continuation: [
                100,
                100, 0,
                100, 100, 0,
                100, 0, 100, 100,
                0, 0, 0, 0, 0,
                0, 0, 0, 0, 0, 0,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
        })
    }

    pathInstructionsComps() {
        this.setState({
            isClicked: [
                true,
                true, true,
                true, true, true,
                true, true, true, true,
                true, true, true, true, true
            ],
            // Save continuation decision in percent
            continuation: [
                100,
                100, 0,
                100, -100, 0,
                100, 0, 100, 100,
                0, 0, 0, 0, 0,
                0, 0, 0, 0, 0, 0,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
        })
    }

    randInstructionsComp() {
        this.setState({
            isClicked: [
                true,
                true, true,
                true, true, true,
                true, true, true, true,
                true, true, true, true, true
            ],
            // Save continuation decision in percent
            continuation: [
                50,
                100, 0,
                100, 100, 0,
                100, 0, 100, 100,
                0, 0, 10, 0, 0,
                0, 0, 0, 0, 0, 0,
                // 1, 1, 1, 1, 1, 1, 1
                // 1, 1, 1, 1, 1, 1, 1, 1
            ],
        })
    }

    voidFunction(){
        return
    }

    // Submit information
    submitData = () =>{
        let data = {
            isClicked: this.state.isClicked,
            continuation: this.state.continuation,
        }
        console.log(data)

        liveSend(data) // Sends state to oTree backend        
    }

  render() { 
        if (! this.props.show) {
            return <></>
        }

        let upTickSub = js_vars.upTick
        let upTick = upTickSub.toFixed(2);
        let downTick;

        if (js_vars.downTick) {
            let downTickSub = js_vars.downTick
            downTickSub = - downTickSub
            downTick = (downTickSub.toFixed(2));
        } else {
            upTickSub = -upTickSub
            downTick = (upTickSub.toFixed(2));
        }

      return ( 
        <>
        <div className="row mb-3" id="choiceSection">
            <div className="col-12 px-0">
                <div className="row mt-2 form-inline">
                    {/* Left column showing individual risk */}
                    {this.state.nodeChoiceShow ? 
                    <BasicNodeChoice 
                        currentNode={this.state.currentNode}
                        indArray = {this.state.indArray}
                        submitMe = {this.submitNodeChoice}
                        closeMe = {this.closeNodeChoice}
                        /> 
                    : 
                    this.state.showPDChoice ? 
                    <PathNodeChoice 
                        show = {this.state.showPDChoice}
                        pdStop = {this.state.pdStopDecision}
                        header = {"My instruction at the selected ball"}
                        currentNode = {this.state.currentNode}
                        radioClick = {this.radioClick}
                        closeMe = {this.closeNodeChoice}
                    /> 
                    :
                    this.state.showRandChoice ? 
                        <RandNodeChoice 
                            currentNode={this.state.currentNode}
                            header = {"My instruction at the selected ball"}
                            submitMe = {this.submitNodeChoice}
                            closeMe = {this.closeNodeChoice}
                            /> 
                    :
                    <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">Single risk</h5><br></br>
                            <div className="card-body">
                                <table className="table table-borderless" style={{
                                    width:"100%", 
                                    alignSelf: "center", 
                                    position: "relative", 
                                    margin: "0 auto",
                                    top: "35%", }}>
                                <thead>
                                    <tr>
                                        <th className="text-center">
                                            Coin toss outcome
                                        </th>
                                        <th className="text-center">
                                            The winning side
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td id="coinTossOutcome" className="align-middle text-center" style={{width:"50%"}}>
                                            <img src='/static/img/coin_questionmark.png' style={{
                                                height: "100px"
                                            }}/>
                                        </td>
                                        <td id="coinTossGuess" className="align-middle text-center" style={{width:"50%"}}>
                                            <img src='/static/img/coin_questionmark.png' style={{
                                                height: "100px"
                                            }}/>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colSpan="1" style={{textAlign: "right"}}>
                                            Win the single risk:
                                        </td>
                                        <td style={{textAlign: "center"}}>
                                        +£{upTick}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colSpan="1" style={{textAlign: "right"}}>
                                            Lose the single risk:
                                        </td>
                                        <td style={{textAlign: "center"}}>
                                        -£{upTick}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                    }
                    
                    {/* Right column with triangle */}
                    <div className="col-md-6 pr-3 pl-1">
                        <div className="card" id="input-widget" style={{
                        minHeight: "400px",
                        }}>
                            <h5 className="card-header  bg-dark text-white text-center" id="instructionHeader">My instructions</h5>
                            <div className="card-body" id="treeStructure" style={{
                                height: "250px",
                                width: "300px",
                                position: "relative",
                                margin: "0 auto"
                            }}>
                                <DecisionTree
                                    upTick = {js_vars.upTick} 
                                    ClickHandler={this.NodeClickHandler} 
                                    isClicked={this.state.isClicked} 
                                    mouseEnter= {this.voidFunction}
                                    mouseLeave= {this.voidFunction}
                                    drawn={this.props.drawn ? this.props.drawn : this.state.drawn}
                                    currentNode = {this.state.currentNode}
                                    continuation={this.state.continuation} 
                                    initialColor = {this.props.initialColor}
                                    isStopBall = {this.state.isStopBall}
                                    />
                            </div>
                        </div>
                    </div>
                </div>
            </div>               
        </div> 
        </>
      )
  }
}