var Email = React.createClass({
    handleChangePage: function (page) {
        this.setState({curPage: page});
    },
    handleClick: function (e) {
        e = 'emailList';
        this.props.handler(e);
        this.handleExtras();
    },
    handleJudgeSelection: function (id, term, rowNum, btn) {
        var rowNum = rowNum;
        var btn = btn;
        var state = $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('div').children().eq(btn).attr('class');
        //console.log(state);

        if (state == 'btn btn-lightblue btn-filter2 active') {
            $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('div').children().eq(btn).parent().siblings().prop('indeterminate', true);
        }
        else {
            $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('div').children().eq(btn).parent().siblings().prop('indeterminate', false);
        }

        this.props.valueHandler(id, term);
    },
    handleStudentSelection: function (id, term, states, rowNum, btn) {
        var rowNum = rowNum;
        ////console.log(btn);
        var btn = btn;
        ////console.log(btn);
        var unchecked = 0;
        var checked = 0;
        //var id = $(e.target).data('id');

        //$('.btn').eq(1).parent().siblings().prop('checked', false)
        $('.termChild').eq(rowNum).parents('td').eq(0).next().children('div').children().eq(btn).parent().siblings().prop('indeterminate', true)
        /*////console.log('these are the states: ',states);
         $('.termChild').eq(rowNum).parents('td').eq(0).next().children('div').children().each(function () {
         ////console.log('this is the current button: ', this);
         var state = $(this).data('state');
         ////console.log('this is the current state: ', state);
         var notPressed = 'unselected';
         var pressed = 'selected';
         ////console.log('this is the current notPressed: ', notPressed);
         ////console.log('this is the current pressed: ', pressed);
         if (state === notPressed) {
         ////console.log('inside td-primary if: ', unchecked);
         unchecked++;
         }
         if (state === pressed) {
         ////console.log('inside td-primary info if: ', checked);
         checked++;
         }
         });
         var numChildren = $('.termChild').eq(rowNum).parents('td').eq(0).next().children('div').children().length;
         ////console.log('numChildren: ', numChildren, 'unchecked: ', unchecked, 'checked: ', checked);
         if (numChildren > (unchecked) || numChildren > (checked)) {
         $('.studentsChild ').eq(0).prop("indeterminate", true);
         }*/
        this.props.valueHandler(id, term);
    },
    handleExtras: function () {
        var extras = document.getElementById("extras").value;
        var result = extras.split("\n");
        //console.log('this is the list of extras: ', result);
        this.props.extrasHandler(result);
    },
    getInitialState: function () {
        TermEntity.loadTerms();
        return {
            curPage: '',
            terms: ''
        }
    },
    componentWillUnmount: function () {
        if (!Back) {
            Navigation.push("adminEmail");
        }
        else {
            Back = false;
        }
    },
    componentDidMount: function () {
        $(TermEntity).on('TermsHasChanged', function () {
            this.setState({terms: TermEntity.getTerm()});
        }.bind(this))
    },
    handleTermCheckboxes: function (e) {
        if ($('#termHeader').prop('checked') == false) {
            $('#termHeader').parents().eq(4).children().find('input').each(function () {
                if ($(this).prop('checked') == false) {
                    $(this).click()
                }
            })
            //$('.rowHeader').click();
            $('#termHeader').prop("checked", true);
            $('#termHeader').prop("indeterminate", false);
            $('#studentsHeader').prop("checked", true);
            $('#judgesHeader').prop("checked", true);
            $('#studentsHeader').prop("indeterminate", false);
            $('#judgesHeader').prop("indeterminate", false);
            $('.termChild').prop("indeterminate", false);

        }
        if ($('#termHeader').prop('indeterminate') == false) {
            $('#termHeader').parents().eq(4).children().find('input').each(function () {
                if ($(this).prop('checked') == true) {
                    $(this).click()
                }
            })
            //$('.rowHeader').click();
            $('#termHeader').prop("checked", false);
            $('#studentsHeader').prop("checked", false);
            $('#judgesHeader').prop("checked", false);
        }
    },
    handleJudgeCheckboxes: function (e) {
        if (e.target.checked) {
            $('.judgesChild').click();
            $('#judgesHeader').prop("indeterminate", false);
        } else {
            $('.judgesChild').click();
        }
    },
    handleStudentCheckboxes: function (e) {
        if (e.target.checked) {
            $('.studentsChild').click();
            $('#studentsHeader').prop("indeterminate", false);
        } else {
            $('.studentsChild').click();
        }
    },

    handleTermChildCheckboxes: function (e) {
        var rowNum = $(e.target).data('id');

        if (e.target.checked) {
            $('#termHeader').prop("indeterminate", true);
            //$('#termHeader').prop("indeterminate", true);
        } else {
            $('#termHeader').prop("indeterminate", false);
            $('#termHeader').prop("checked", false);
        }
        $('.termChild').eq(rowNum).parents('td').eq(0).next().children('input').click();
        $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('input').click();
    },

    handleStudentChildCheckboxes: function (e) {
        var rowNum = $(e.target).data('id');

        if (e.target.checked) {
            //if (($('#studentsHeader').prop("checked")) == false || ($('#studentsHeader').prop("indeterminate")) == true) {
            $('#termHeader').prop("indeterminate", true);
            $('#studentsHeader').prop("indeterminate", true);
            $('.studentsChild').eq(rowNum).parents('tr').children().eq(0).children().children().eq(0).prop('indeterminate', true)
            //}
        } else {
            $('#termHeader').prop("indeterminate", false);
            $('#studentsHeader').prop("indeterminate", false);
            $('.studentsChild').eq(rowNum).parents('tr').children().eq(0).children().children().eq(0).prop('indeterminate', false)
        }
        $('.termChild').eq(rowNum).parents('td').eq(0).next().children('div').children().click();
    },

    handleJudgeChildCheckboxes: function (e) {
        var rowNum = $(e.target).data('id');
        ////console.log('this is rowNum: ',rowNum)
        if (e.target.checked) {
            // $('.studentsChild').parents('tbody').children().children('td').children('.studentsChild').each(function(){})
            $('#termHeader').prop("indeterminate", true);
            $('#judgesHeader').prop("indeterminate", true);
            $('.judgesChild').eq(rowNum).parents('tr').children().eq(0).children().children().eq(0).prop('indeterminate', true)
        } else {
            $('#termHeader').prop("indeterminate", false);
            $('#judgesHeader').prop("indeterminate", false);
            $('.judgesChild').eq(rowNum).parents('tr').children().eq(0).children().children().eq(0).prop('indeterminate', false)
        }
        $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('div').children().click();
    },

    render: function () {
        ////console.log('these are the terms: ', this.state.terms);
        //opacity: .5
        var self = this;
        var counter = 0;
        return (
            <div data-role="page" id="adminEmail" className="container">
                <table className="table borderless ">
                    <tr>
                        <td style={{textAlign: 'left', verticalAlign: 'bottom'}}>
                            <h1>Email
                                <small> Admin</small>
                            </h1>
                        </td>
                        <td style={{textAlign: 'right', verticalAlign: 'bottom'}}>
                            <button id="toEmailListButton" type="button" className="btn btn-lightblue"
                                    onClick={this.handleClick}>Next
                            </button>
                        </td>
                    </tr>
                </table>

                <h5><b>Select List of Recipients</b></h5>

                <table className="table table-bordered"
                       style={{ align: 'center', width:'100%', height:'100%', margin: '0 auto'}}>
                    <tbody>
                    <tr style={{textAlign: 'center'}}>
                        <td colSpan="1" style={{padding: '15px'}}>
                            <div className="make-switch switch-mini" id="rowSelectAll">
                                <input type="checkbox" id="termHeader" onClick={this.handleTermCheckboxes}>
                                    Terms </input>

                            </div>
                        </td>
                        <td colSpan="2" style={{padding: '15px'}}>
                            <div className="make-switch switch-mini" id="rowSelectAll">
                                <input type="checkbox" id="studentsHeader" onChange={this.handleStudentCheckboxes}>
                                    Students </input>
                            </div>
                        </td>
                        <td colSpan="3" style={{padding: '15px'}}>
                            <div className="make-switch switch-mini" id="rowSelectAll">
                                <input type="checkbox" id="judgesHeader" onChange={this.handleJudgeCheckboxes}>
                                    Judges </input>
                            </div>
                        </td>
                    </tr>
                    {$.map(this.state.terms, function (term) {
                        var id = counter;
                        counter++;
                        return [<tr key={id} id={id} style={{textAlign: 'center'}}>
                            <td colSpan="1" style={{ padding: '15px'}}>
                                <div className="make-switch switch-mini toggle-state-switch">
                                    <input data-id={id} type="checkbox" className="rowHeader termChild"
                                           onChange={self.handleTermChildCheckboxes} id={term.name}> {term.name}</input>
                                </div>
                            </td>
                            <td colSpan="2" style={{ padding: '15px'}}>
                                <input data-id={id} type="checkbox" id="rowSelectAllc"
                                       className="studentsChild rowChild"
                                       onChange={self.handleStudentChildCheckboxes}></input>

                                <div className="btn-group" data-toggle="buttons">
                                    <EmailButton key="AC" btnNum="0" text="AC" id="Active" data={id} term={term.name}
                                                 handler={self.handleStudentSelection}/>
                                    <EmailButton key="DR" btnNum="1" text="DR" id="Dropped" data={id} term={term.name}
                                                 handler={self.handleStudentSelection}/>
                                    <EmailButton key="OD" btnNum="2" text="OD" id="Overloaded" data={id}
                                                 term={term.name}
                                                 handler={self.handleStudentSelection}/>
                                </div>
                            </td>
                            <td colSpan="3" style={{padding: '15px', wordWrap: 'break-word'}}>
                                <input data-id={id} type="checkbox" id="rowSelectAllc" className="judgesChild rowChild"
                                       onChange={self.handleJudgeChildCheckboxes}></input>

                                <div className="btn-group" data-toggle="buttons">
                                    <EmailButton key="PR" btnNum="3" text="PR" id="Prospective" data={id}
                                                 term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="IN" btnNum="4" text="IN" id="Invited" data={id} term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="RJ" btnNum="5" text="RJ" id="Rejected" data={id} term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="PE" btnNum="6" text="PE" id="Pending" data={id} term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="RG" btnNum="7" text="RG" id="Registered" data={id}
                                                 term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="AT" btnNum="8" text="AT" id="Attended" data={id} term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="ST" btnNum="9" text="ST" id="Started Grading" data={id}
                                                 term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                    <EmailButton key="GR" btnNum="10" text="GR" id="Graded" data={id} term={term.name}
                                                 handler={self.handleJudgeSelection}/>
                                </div>
                            </td>
                        </tr>];
                    })}
                    </tbody>
                </table>

                <br></br>

                <h5><b>Extra e-mails (one per line)</b></h5>

                <table className="table table-bordered">
                    <tbody>
                    <tr>
                        <textarea className="form-control" rows="3" id="extras" name="extras"></textarea>
                    </tr>
                    </tbody>
                </table>

            </div>
        );
    }

});

var EmailButton = React.createClass({
    handleOnClick: function (e) {
        var nextState = this.state.curState == 'selected' ? 'unselected' : 'selected';
        //var state = $(e.target).data('state');
        var rowNum = $(e.target).data('id');
        var btn = $(e.target).data('key');
        this.setState({curState: nextState});
        //var state = $('.termChild').eq(rowNum).parents('td').eq(0).next().next().children('div').children().eq(btn).attr('data-state');
        this.props.handler(this.props.id, this.props.term, rowNum, btn);

    },
    getInitialState: function () {
        return {curState: 'unselected'};
    },
    render: function () {
        var state = this.state.curState;
        ////console.log(this.props.btnNum);
        return (
            <button key={this.props.data} data-state={state} data-id={this.props.data} data-key={this.props.btnNum}
                    className="btn btn-lightblue btn-filter2" //className={state}
                    onClick={this.handleOnClick} ref='row'>
                {this.props.text}
            </button>
        );
    }
});