/**
 * Created by Marlon on 7/5/2015.
 */
var amount = -1;
var EmailList = React.createClass({
    handleChangePage: function (page) {
        this.setState({curPage: page});
    },
    handleRecipients: function (email) {
        var extras = this.state.sextras;

        var toRemove = -1;
        for (var j = 0; j < extras.length; j++) {
            if (email == extras[j]) {
                toRemove = j;
            }
        }

        if (toRemove != -1) {
            extras.splice(toRemove, 1);
        }
        else {
            extras.push(email);
        }
        console.log(extras);
        this.setState({sextras: extras});

    },
    handleSRecipients: function (email) {
        var extras = this.state.sstudents;
        var toRemove = -1;
        for (var j = 0; j < extras.length; j++) {
            if (email.id == extras[j].id) {
                toRemove = j;
            }
        }

        if (toRemove != -1) {
            extras.splice(toRemove, 1);
        }
        else {
            extras.push(email);
        }
        console.log(extras);
        this.setState({sstudents: extras});
    },
    handleJRecipients: function (email) {
        var extras = this.state.sjudges;
        var toRemove = -1;
        for (var j = 0; j < extras.length; j++) {
            if (email.id == extras[j].id) {
                toRemove = j;
            }
        }

        if (toRemove != -1) {
            extras.splice(toRemove, 1);
        }
        else {
            extras.push(email);
        }

        console.log(extras);
        this.setState({sjudges: extras});
    },
    componentWillUnmount: function () {
        studentsInfo = [];
        judgesInfo = [];
        amount = -1;
    },
    handleClick: function (e) {
        e.preventDefault();
        e = 'emailSelectTemplate';
        var extras = this.state.sextras;
        if(this.state.sextras == [""]) extras = [];
        this.props.handleToBeSent(this.state.sstudents, this.state.sjudges, extras);
        this.props.handler(e);
    },
    getInitialState: function () {

        $(UserEntity).on('StudentsData', function () {

            if (this.state.count == amount) {
                var students = UserEntity.getFullStudentsInfo();
                var judges = UserEntity.getFullJudgesInfo();
                var extras = this.state.extras;
                var newExtras = [];
                var i = '';
                for(i in extras)
                {
                    newExtras.push(extras[i]);
                    $.map(students, function (student) {
                        if (student.email == extras[i])
                        {
                            newExtras.pop();
                        }
                    });
                    $.map(judges, function (judge) {
                        if (judge.email == extras[i])
                        {
                            newExtras.pop();
                        }
                    });
                }
                this.setState({
                    judges: judges,
                    sjudges: judges.slice(0),
                    students: students,
                    sstudents: students.slice(0),
                    count: 0,
                    amount: 0,
                    extras: newExtras,
                    sextras: newExtras.slice(0)
                });
            }
            else {
                this.setState({count: (this.state.count + 1)})
            }
        }.bind(this));
        return ({
            amount: 0,
            count: 0,
            filters: this.props.filters,
            extras: this.props.extra,
            sextras: this.props.extra.slice(0),
            students: [],
            sstudents: [],
            sjudges: [],
            judges: []
        });
    },
    getFilter: function (type) {

        var result = '';
        switch (type) {
            case "AC":
                result = 'Active';
                break;
            case "DR":
                result = 'Dropped';
                break;
            case "OD":
                result = 'Overloaded';
                break;
            case "RG":
                result = 'Registered';
                break;
            case "RJ":
                result = 'Rejected';
                break;
            case "PR":
                result = 'Prospective';
                break;
            case "IN":
                result = 'Invited';
                break;
            case "PE":
                result = 'Pending';
                break;
            case "ST":
                result = 'Started Grading';
                break;
            case "GR":
                result = 'Graded';
                break;
            case "AT":
                result = 'Attended';
                break;
            case "RE":
                result = 'Removed';
                break;
            default:
                break;
        }

        return result;
    },

    componentDidMount: function () {
        studentsInfo = [];
        judgesInfo = [];
        var fils = this.state.filters;
        var checked = [];
        var i;
        var amountc = -1;
        for (i in fils) {

            var filter = fils[i];
            var type;
            if (filter.state == 1) {

                amountc++;
                checked.push(filter);
            }
        }

        amount = amountc;

        for (i in checked) {
            var filter = checked[i];
            var type;
            switch (filter.filter) {
                case "AC":
                case "DR":
                case "OD":
                    type = 0;
                    break;
                default:
                    type = 1;
            }

            switch (type) {
                case 0:
                    UserEntity.loadFullStudentsInfo(filter.term, this.getFilter(filter.filter));
                    break;
                default:
                    UserEntity.loadFullJudgesInfo(filter.term, this.getFilter(filter.filter));
                    break;
            }
        }
    },
    render: function () {
        console.log(this.state.sextras);
        console.log(this.state.sstudents);
        console.log(this.state.sjudges);
        var self = this;
        return (
            <div data-role="page" id="adminEmail" className="container">
                <table className="table borderless ">
                    <tr>
                        <td style={{textAlign: 'left', verticalAlign: 'bottom'}}>
                            <h1>Email List
                                <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>Students</b></h5>

                <table className="table table-bordered selection pointer">
                    <tbody>
                    {$.map(this.state.students, function (student) {
                            return [<UserRow id={student.id} key={student.id} user={student} data={student.fname}
                                             email={student}
                                             dato={student.lname} userHandler={self.handleSRecipients}/>];
                        }
                    )}
                    </tbody>
                </table>

                <h5><b>Judges</b></h5>

                <table className="table table-bordered selection pointer">
                    <tbody>
                    {$.map(this.state.judges, function (judge) {
                            return [<UserRow id={judge.id} key={judge.id} user={judge} data={judge.fname} email={judge}
                                             dato={judge.lname}
                                             userHandler={self.handleJRecipients}/>];
                        }
                    )}
                    </tbody>
                </table>

                <h5><b>Extra e-mails</b></h5>

                <table className="table table-bordered">
                    <tbody>
                    {$.map(this.state.extras, function (extra) {
                            if (extra != "") {
                                return [<EmailRow key={extra} id={extra} data='New Invitee' email={extra} dato=''
                                                  emailHandler={self.handleRecipients}/>];
                            }
                        }
                    )}
                    </tbody>
                </table>

            </div>
        );
    }

});

var UserRow = React.createClass({
    handleOnClick: function (e) {
        e.preventDefault();
        var nextState = this.state.curState == 'selected' ? 'unselected' : 'selected';
        //this.props.userHandler(this.props.user);
        this.props.userHandler(this.props.email);
        this.setState({curState: nextState});
    },
    getInitialState: function () {
        return {curState: this.props.state};
    },
    render: function () {
        var state = this.state.curState == 'selected' ? 'td-primary' : 'td-primary info';

        return (
            <tr onClick={this.handleOnClick} ref='row'>
                <td id={this.props.id} className={state}>
                    {this.props.data} {this.props.dato}
                    <br></br>
                    <small>{this.props.email.email}</small>
                </td>
            </tr>
        );
    }
});

var EmailRow = React.createClass({
    handleOnClick: function (e) {
        e.preventDefault();
        var nextState = this.state.curState == 'selected' ? 'unselected' : 'selected';
        //this.props.userHandler(this.props.user);
        this.props.emailHandler(this.props.email);
        this.setState({curState: nextState});
    },
    getInitialState: function () {
        return {curState: this.props.state};
    },
    render: function () {
        var state = this.state.curState == 'selected' ? 'td-primary' : 'td-primary info';

        return (
            <tr onClick={this.handleOnClick} ref='row'>
                <td id={this.props.id} className={state}>
                    {this.props.data} {this.props.dato}
                    <br></br>
                    <small>{this.props.email}</small>
                </td>
            </tr>
        );
    }
});