class AttentionCheck extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            classNameWrong: "d-none", classNameCorrect: "d-none", input_value: ""
        },
        this.submitCheck = this.submitCheck.bind(this);
        this.disableInput = this.disableInput.bind(this);
    }

    componentDidMount () {
        if (this.props.stopEntry) {
            this.disableInput()
        }
    }

    submitCheck = () => {
        console.log("submit")
        let input = document.getElementById(this.props.data['OtreeID'] + 'input').value
        input = input.toLowerCase()
        let correct_answer = this.props.data["CorrectAnswer"]
        let correctChars = 0
        let correct = false
        
        for (var i = 0; i < correct_answer.length; i++) {
            let tmp = correct_answer.charAt(i)

            let inInput = input.includes(tmp)
            if (inInput){
                correctChars += 1
            }
        }
        
        if (correctChars >= correct_answer.length - 1){
            correct = true;
        }
    
        if (correct) {
            this.setState({
                classNameWrong: "d-none",
                classNameCorrect: "alert alert-success"
            })

            //this.props.allCorrect(field_ID)
        } else {
            this.setState({
                classNameWrong: "alert alert-danger",
                classNameCorrect: "d-none"
            })
        }

        this.disableInput()
        this.props.submitted(correct)
    }

    disableInput () {
        document.getElementById(this.props.data['OtreeID'] + 'input').disabled = true;
        document.getElementById(this.props.data['OtreeID'] + 'btn').disabled = true;
        document.getElementById(this.props.data['OtreeID'] + 'btn').classList.add("d-none");
    }

    render() {
        let QuestionText = this.props.data["QuestionText"]
        let WrongText = this.props.data["WrongText"]
        return (
            <>
                <label>
                    {QuestionText}
                </label>
                <input 
                    id={this.props.data['OtreeID'] + 'input'} 
                    className="form-control mb-2"
                    ></input>
                <div id={this.props.data['OtreeID'] + '_wrong'} className={`${this.state.classNameWrong}`}>
                    {WrongText}
                </div>
                <button 
                    type="button" 
                    className="btn btn-primary mb-2" 
                    id={this.props.data['OtreeID'] + 'btn'} 
                    onClick={() => this.submitCheck()}>
                        Submit your answer
                </button>
            </>
        )
    }
}

class CompCheck extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            attention_answers: [], 
            classNameNo: "d-none", 
            classNameWrong: "d-none", 
            classNameCorrect: "d-none", 
            selectedOption: -999,
            timer: undefined,
        },
        this.submitCheck = this.submitCheck.bind(this);
        this.setTimer = this.setTimer.bind(this);
    }

    submitCheck = () => {
        let { attention_answers, classNameWrong, classNameCorrect } = this.state
        let AttentionInput = this.state.selectedOption
        let correct_answer = this.props.data["CorrectAnswer"]
        let field_ID = this.props.data["OtreeID"]
        attention_answers.push(AttentionInput)

        this.setState({
            attention_answers
        })

        // Submit answer back to props
        this.props.suppliedAnswer(field_ID, AttentionInput)

        if (AttentionInput == correct_answer) {

            document.getElementById(field_ID).value = attention_answers

            this.setState({
                classNameWrong: "d-none",
                classNameCorrect: "alert alert-success",
                classNameNo: "d-none",
            });

            this.props.allCorrect(field_ID)
            
        
        } else if (AttentionInput != -999) {
            console.log("Wrong")
            this.setState({
                classNameWrong: "alert alert-danger",
                classNameCorrect: "d-none",
                classNameNo: "d-none",
            })
            let radios = document.getElementsByName(this.props.data["OtreeID"] + "_MC")
            for (let i = 0, r = radios, l = r.length; i < l; i++) {
                r[i].disabled = true
            }
            /*
            let button = document.getElementById(this.props.data['OtreeID'] + 'btn')
            button.disabled = true
            */
            setTimeout(function () {
                for (let i = 0, r = radios, l = r.length; i < l; i++) {
                    r[i].disabled = false
                }
                //button.disabled = false
            }, 10 * 1000)
        } else {
            console.log("Else")
            this.setState({
                classNameWrong: "d-none",
                classNameCorrect: "d-none",
                classNameNo: "alert alert-danger",
            })
        }
    }

    radioChange = (e) => {
        this.setState({
            selectedOption: Number(e.target.value),
            classNameWrong: "d-none",
            classNameCorrect: "d-none",
            classNameNo: "d-none",
        }, this.setTimer(200))
    }

    setTimer = (time) => {
        let timer = this.state.timer
        
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => { this.submitCheck(); }, time);
        this.setState({timer})
    }

    render() {
        let radioItems = []
        let field_ID = this.props.data["OtreeID"] + "_MC"

       for (let i = 0; i < this.props.data["Options"].length; i++) {
           radioItems.push(
            <div className="form-check form-check-inline d-inline-flex">
                <input key={i} className="form-check-input" type="radio" 
                    onInput={this.radioChange}
                    id={field_ID + "_" + i} name={field_ID} 
                    value={this.props.data["Options"][i][0]}
                    style={{marginRight: "10px"}}
                    ></input>

                <label htmlFor={field_ID + "_" + i} className="form-check-label">
                    {this.props.data["Options"][i][1]}
                </label>
            </div>
               )
       }

        return (
            <div className="my-1 container px-2 py-1">
                <label>
                    {this.props.data["QuestionText"]}
                </label> <br></br>

                    {radioItems} 
                    <br></br>

                    {/*
                    <button type="button" className="btn btn-primary mb-2" 
                        id={this.props.data['OtreeID'] + 'btn'} 
                        onClick={() => this.submitCheck()}
                        
                        >
                            Submit your answer
                    </button>
                    */}
                <div className={this.state.classNameNo}>
                    Please answer the question above.
                </div>
                <div className={this.state.classNameWrong}>
                    {this.props.data["WrongText"]}
                </div>
                <div className={this.state.classNameCorrect}>
                    {this.props.data["CorrectText"]}
                </div>
            </div>
        )
    }
}