var QuestionsPage = React.createClass({
    getInitialState: function () {
        $(GradeEntity).on('GradeHasChanged', function() {
            this.setState({ questions: QuestionsEntity.get(), grades: GradeEntity.getGrade() });
        }.bind(this))
        return ({
            scores: [],
            grades: [],
            formErrors: [],
            questions: [], 
        })

    },
    componentDidMount: function () {
        $(QuestionsEntity).on('getCurrentQuestions', function() {
            GradeEntity.loadGrade(this.props.student.studentid, this.props.student.judgeid);
            $(QuestionsEntity).off('getCurrentQuestions');
        }.bind(this));
        QuestionsEntity.loadCurrentQuestions();
    },

    handleClickSave: function (e) {
        console.log(this.state.questions);
        e.preventDefault();
        console.log(this.state.questions);
        this.state.questions.map(GradeEntity.UpdateGrade);
        e = 'judgeHome';
        this.props.handler(e);
    },

    handleQuestionUpdate: function(grade) {
        console.log(grade);
        for (var j = 0; j < this.state.questions.length; j++)
        {
            if(grade.id ===  this.state.questions[j].id)
            {
                this.state.questions[j].value = grade.value;
                this.state.questions[j].text = grade.text;
            }
        }
    },

    render: function () {
        //console.log(this, 'QUESTION PAGE');
        var questions = this.state.questions;
        var i = 0;
        var self = this;
        return (
            <div className="container loginView judgeView">
                <h3 className="title-form">Current Student: <b>{this.props.student.fname} {this.props.student.lname}</b></h3><br />
                {$.map(questions, function(question)
                    {
                        var grade = {};
                        var j = 0;

                        for(j in self.state.grades)
                        {
                            if (self.state.grades[j].questionsid == question.id && self.state.grades[j].studentid == self.props.student.studentid)
                            {
                                grade = self.state.grades[j];
                            }
                        }
                        return [<QuestionBlock handleClick={self.handleQuestionUpdate} grade={grade} handler={self.handleClick} key={i++} keyid={i} data={question} record={self.props.student} judgeid={self.props.judgeid} termid={self.props.user.termid}/>]
                    }
                )}
                <div className="form-group">
                    <div className="input-group full-width">
                        <button type="submit" onClick={this.handleClickSave} id="saveGrades" className="btn btn-lightblue btn-block">Save Scores</button>
                    </div>
                </div>
            </div>
        );
    }
});

var QuestionBlock = React.createClass({
    getInitialState: function () {
        return ({
            limit: 0
        })
    },

    componentDidMount: function() {
        console.log('SET LIMIT', this.props.data.value);
        this.setState({limit: this.props.data.value});
        console.log('SET LIMIT', this.state.limit);
        $('.fa-plus-circle').click(); 
    },

    handleClickLess: function (e) {

        if(parseInt($(e.target).parent().prev().text()) > 0)
        {
            $(e.target).parent().prev().text(parseInt($(e.target).parent().prev().text())-1)
        }
        var temp = this.props.data;
        temp.value = parseInt($(e.target).parent().prev().text());
        temp.studentid = this.props.record.studentid;
        temp.termid = this.props.termid;
        temp.judgeid = this.props.record.judgeid;
        temp.comment = $(e.target).parents('table').next().find('textarea').val();
        console.log('SET LIMIT', this.props.data.value);
        console.log('SET LIMIT', this.state.limit);

        this.props.handleClick(temp);
    },

    handleClickMore: function (e) {
        if(parseInt($(e.target).parent().prev().text()) < this.state.limit)
        {
            $(e.target).parent().prev().text(parseInt($(e.target).parent().prev().text())+1)
        }
        var temp = this.props.data;
        temp.value = parseInt($(e.target).parent().prev().text());
        temp.studentid = this.props.record.studentid;
        temp.termid = this.props.termid;
        temp.judgeid = this.props.record.judgeid;
        temp.comment = $(e.target).parents('table').next().find('textarea').val();
        //console.log($(e.target).parents('table').next().find('textarea').val());
        console.log('SET LIMIT', this.props.data.value);
        console.log('SET LIMIT', this.state.limit);

        this.props.handleClick(temp);
    },

    handleChange: function (e){
        //console.log(e.target);
        var temp = this.props.data;
        temp.value = parseInt($(e.target).parent().prev().find('.gradeValue').text());
        temp.studentid = this.props.record.studentid;
        temp.termid = this.props.termid;
        temp.judgeid = this.props.record.judgeid;
        temp.comment = $(e.target).val();
        this.props.handleClick(temp);
    },

    render: function(){
        console.log("ELEMENT =", this);
        console.log("Studentid =", this.props.record.studentid);
        console.log("Termid =", this.props.termid);
        console.log("Questionid =", this.props.data.id);
        console.log("Judgeid =", this.props.record.judgeid);
        console.log("VALUE =", this.props.grade);
        console.log(this.props.grade);
        return(
            <div>
                <h4>{this.props.data.text}</h4>
                <table className="table table-bordered">
                    <tbody>
                        <tr>
                            <td className="td-primary input-group-addon">Grade</td>
                            <td className="gradeValue td-secondary">{this.props.grade.value != undefined ? this.props.grade.value : this.state.limit}</td>
                            <td className="col-md-1 fa-2x" style={{padding: 0, verticalAlign: 'middle', color: '#2296f4', cursor: 'pointer'}}>
                                <div onClick={this.handleClickLess} className="col-md-6 fa fa-minus-circle" title="Decrease"></div>
                                <div onClick={this.handleClickMore} className="col-md-6 fa fa-plus-circle" title="Increase"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div className="form-group">
                    <label>Comments</label>
                    <textarea defaultValue={this.props.grade.comment} onChange={this.handleChange} className="form-control" rows="3" placeholder=""></textarea>
                </div>
            </div>
        )
    }
});