class AttentionCheck extends React.Component {
    state = {
        attention_answers: [], classNameWrong: "d-none", classNameCorrect: "d-none", input_value: ""
    }

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

        this.setState({
            attention_answers
        })
        if (Array.isArray(correct_answer)) {
            // console.log("Array of correct answers")
            if (correct_answer.includes(AttentionInput)) {
                document.getElementById(field_ID).value = fix_attention_answers
                this.setState({
                    classNameWrong: "d-none",
                    classNameCorrect: "alert alert-success"
                })
            } else {
                this.setState({
                    classNameWrong: "alert alert-danger",
                    classNameCorrect: "d-none"
                })
            }

        } else {
            // console.log("Single correct answer")
            if (AttentionInput == correct_answer) {
                document.getElementById(field_ID).value = fix_attention_answers
                this.setState({
                    classNameWrong: "d-none",
                    classNameCorrect: "alert alert-success"
                })
            } else {
                this.setState({
                    classNameWrong: "alert alert-danger",
                    classNameCorrect: "d-none"
                })
                let input = document.getElementById(this.props.data['OtreeID'] + 'input')
                let button = document.getElementById(this.props.data['OtreeID'] + 'btn')
                input.disabled = true
                button.disabled = true
                setTimeout(function () {
                    input.disabled = false
                    button.disabled = false
                }, 20 * 1000)

            }
        }
    }

    sync_input = (e) => {
        this.setState({ input_value: e.target.value })
    }

    render() {
        let QuestionText = this.props.data["QuestionText"]
        let WrongText = this.props.data["WrongText"]
        let CorrectText = this.props.data["CorrectText"]
        return (
            <div className="my-1 container px-2 py-1">
                <label className="mb-2">
                    {QuestionText}
                </label>
                <input id={this.props.data['OtreeID'] + 'input'} type="number" onChange={this.sync_input} className="form-control mb-2" step="0.01"></input>
                <button className="btn btn-primary mb-2" id={this.props.data['OtreeID'] + 'btn'} type="button" onClick={() => this.submitCheck()}>Submit your answer</button>
                <div className={`${this.state.classNameWrong}`}>
                    {WrongText}
                </div>
                <div className={`${this.state.classNameCorrect}`}>
                    {CorrectText}
                </div>
            </div>
        )
    }
}

class AttentionCheckMultipleChoice extends React.Component {
    state = {
        attention_answers: [], classNameNo: "d-none", classNameWrong: "d-none", classNameCorrect: "d-none", selectedOption: -999,
    }

    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
        })
        if (AttentionInput == correct_answer) {
            document.getElementById(field_ID).value = attention_answers
            this.setState({
                classNameWrong: "d-none",
                classNameCorrect: "alert alert-success",
                classNameNo: "d-none",
            })
        } else if (AttentionInput != -999) {
            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
            }, 20 * 1000)
        } 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",
        })
    }

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

        for (let i = 0; i < this.props.data["Options"].length; i++) {
            radioItems.push(
                <fieldset onChange={this.radioChange.bind(this)} className="form-check form-check-inline mb-2">
                    <label className="form-check-label">
                        <input className="form-check-input" type="radio" name={field_ID} value={this.props.data["Options"][i][0]}></input>
                        {this.props.data["Options"][i][1]}
                    </label>
                </fieldset>)
        }

        let QuestionText = this.props.data["QuestionText"]
        let WrongText = this.props.data["WrongText"]
        let CorrectText = this.props.data["CorrectText"]
        return (
            <div className="my-1 container px-2 py-1">
                <label className="mb-2">
                    {QuestionText}
                </label> <br></br>
                {radioItems} <br></br>
                <button className="btn btn-primary mb-2" id={this.props.data['OtreeID'] + 'btn'} type="button" onClick={() => this.submitCheck()}>Submit your answer</button>
                <div className={`${this.state.classNameNo}`}>
                    Please answer the question above.
                </div>
                <div className={`${this.state.classNameWrong}`}>
                    {WrongText}
                </div>
                <div className={`${this.state.classNameCorrect}`}>
                    {CorrectText}
                </div>
            </div>
        )
    }
}

class AttentionCheckMultipleChoiceVarOutcomes extends React.Component {
    state = {
        attention_answers: [], classNameNo: "d-none", classNameWrong: "d-none", classNameCorrect: "d-none", selectedOption: -999,
    }

    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
        })
        if (AttentionInput == correct_answer) {
            document.getElementById(field_ID).value = attention_answers
            this.setState({
                classNameWrong: "d-none",
                classNameCorrect: "alert alert-success",
                classNameNo: "d-none",
            })
        } else if (AttentionInput != -999) {
            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
            }, 20 * 1000)

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

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


        for (let i = 0; i < this.props.data["Options"].length; i++) {
            radioItems.push(
                <fieldset onChange={this.radioChange.bind(this)} className="form-check form-check-inline mb-2">
                    <label className="form-check-label">
                        <input className="form-check-input" type="radio" name={field_ID} value={this.props.data["Options"][i][0]}></input>
                        {this.props.data["Options"][i][1]}
                    </label>
                </fieldset>)
        }

        let QuestionText = this.props.data["QuestionText"]
        let WrongText = this.props.data["WrongText"]
        let CorrectText = this.props.data["CorrectText"]
        return (
            <div className="my-1 container px-2 py-1">
                <label>
                    {QuestionText}
                </label> <br></br>
                {radioItems} <br></br>
                <button className="btn btn-primary mb-2" id={this.props.data['OtreeID'] + 'btn'} type="button" onClick={() => this.submitCheck()}>Submit your answer</button>
                <div className={`${this.state.classNameNo}`}>
                    Please answer the question above.
                </div>
                <div className={`${this.state.classNameWrong}`}>
                    {WrongText.slice(AttentionInput - 1, AttentionInput)}
                </div>
                <div className={`${this.state.classNameCorrect}`}>
                    {CorrectText}
                </div>
            </div>
        )
    }
}