/**
 * Created by DennysO on 6/26/2015.
 */

var AdminPeopleStudents = React.createClass({
    getInitialState: function() {
        return (
        {items: ''}
        );
    },
    onLoadClick: function(e) {
        $(StudentForm).on('StudentNumHasChanged', function() {
            var num = StudentForm.getNumStudent();
            var result = "Modified: " + num.Modified + "\nAdded: " + num.Added + "\nDropped: " + num.Dropped;
            alert(result);
            $(StudentForm).off('StudentNumHasChanged');
            this.props.onPageChange("students");
        }.bind(this));
        StudentForm.loadStudentsFromSPWS();
    },
    handleClick: function(i, e) {
        e.preventDefault();
        filterPush(i);
        if(table != '') {
            table.destroy();
        }
        this.props.onPageChange("students");
    },
    componentWillUnmount: function () {
        Filter = [];
    },
    render: function() {
        return (
            <div>
                <table className="table" >
                    <tr>
                        <td style={{textAlign: 'left', verticalAlign: 'bottom'}}>
                            <div>
                                <div className="btn-group" data-toggle="buttons">
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Active")}>
                                        Ac
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Dropped")}>
                                        Dr
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Incomplete")}>
                                        In
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td style={{textAlign: 'right', verticalAlign: 'bottom'}}>
                            <button type="button" className="btn btn-lightblue" onClick={this.onLoadClick}><i className="back-icon glyphicon glyphicon-cloud-download" style={{fontSize: '14px'}}></i><span className="hidden-xs"> Load</span></button>
                        </td>
                    </tr>
                </table>
                <AdminPeopleStudentsRows onUpdate={this.handleUpdate}/>
            </div>
        );
    }
});

var AdminPeopleStudentsRows = React.createClass({
    getInitialState: function() {
        return (
        {items: []}
        )
    },
    componentDidMount: function() {
        UserEntity.loadStudentsInfo();
        $(UserEntity).on('StudentsHasChanged', function() {
            this.setState({ items: UserEntity.getStudents() });
        }.bind(this))
    },
    componentDidUpdate: function () {
        table = $('#peopleStudents').DataTable();
    },
    render: function() {
        var items = this.state.items;
        var i = 0;
        return (
            <table className="table table-bordered" id="peopleStudents">
                <thead>
                <tr>
                    <td>Student</td>
                </tr>
                </thead>
            <tbody>
            {
                $.map(items, function(data) {
                    var fname = data.fname == undefined ? "" : data.fname;
                    var state = data.states == undefined ? "Invalid Status" : data.states.name;
                    var key = fname.substring(0,1) + i;
                    i++;
                    if(!inFilter(state))
                    {
                        return [
                        <tr key={key} id={key}>
                            <td>{data.fname} {data.lname}
                                <br /><small><small>Email: {data.email}</small></small>
                                <br /><small><small>Grade: 0</small></small>
                                <br /><small><small>State: {state}</small></small>
                            </td>
                        </tr>];
                    }
                })
            }
            </tbody>
            </table>

        );
    }
});

