var timer;
var AdminHome = React.createClass({
    getInitialState: function() {
        var index = Navigation.indexOf('login');
        //console.log(index);
        if (index > -1) {
            Navigation.splice(index, 1);
            //console.log(Navigation);
        }
        return (
        {data: []}
        );
    },
    componentWillUnmount: function () {
        clearInterval(timer);
        if(!Back)
        {
            Navigation.push("adminHome");
        }
        else
        {
            Back = false;
        }
    },
    componentDidMount: function() {
        $(UserEntity).on('JudgesHasChanged', function() {
            this.setState({data: UserEntity.getAdminHome()});
        }.bind(this));
        UserEntity.loadAdminHome();
        timer = setInterval(function () {UserEntity.loadAdminHome();}, 10000);
    },
    render: function() {
        return (
            <div className="container">
                <div className="page-header">
                    <h1>Home <small>Admin</small></h1>
                </div>
                <h3>Students</h3>
                
                <table className="table table-bordered">
                    <tbody>
                    <tr>
                        <td className="td-primary input-group-addon">Total</td><td className="td-secondary">{this.state.data.total}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Pending Grade</td><td>{this.state.data.pendingGrade}</td>
                    </tr>
                    </tbody>
                </table>

                <h3>Judges</h3>

                <table className="table table-bordered">
                    <tbody>
                    <tr>
                        <td className="td-primary input-group-addon">Prospective</td><td>{this.state.data.pro}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Invited</td><td>{this.state.data.inv}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Rejected</td><td>{this.state.data.rej}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Removed</td><td>{this.state.data.rem}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Pending</td><td>{this.state.data.pen}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Registered</td><td>{this.state.data.reg}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Attended</td><td>{this.state.data.att}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Started Grading</td><td>{this.state.data.sta}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Graded</td><td>{this.state.data.gra}</td>
                    </tr>
                    </tbody>
                </table>

                <h3>Grades</h3>

                <table className="table table-bordered">
                    <tbody>
                    <tr>
                        <td className="td-primary input-group-addon">Not Graded</td><td className="td-secondary">{this.state.data.notgraded}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Graded</td><td>{this.state.data.graded}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Accepted</td><td>{this.state.data.acceptedg}</td>
                    </tr>
                    <tr>
                        <td className="td-primary input-group-addon">Rejected</td><td>{this.state.data.reflected}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        );
    }
});

var AdminPeople = React.createClass({
    handleChangePage: function(page) {
        //console.log(page);
        this.setState({curPage: page});
    },
    getInitialState: function() {
        return {curPage: ''}
    },
    componentWillUnmount: function () {
        if(!Back)
        {
            Navigation.push("adminPeople");
        }
        else
        {
            Back = false;
        }
    },
    render: function() {
        var result = '';
        switch (this.state.curPage)
        {
            case 'students':
                result = <AdminPeopleStudents onPageChange={this.handleChangePage} />;
                break;
            case 'judges':
                result = <AdminPeopleJudges onPageChange={this.handleChangePage} />;
                break;
            default:
                result = <AdminPeopleStudents onPageChange={this.handleChangePage} />;
        }

        return (
            <div className="container">
                <AdminPeopleTabs onPageChange={this.handleChangePage} />
                {result}
            </div>
        );
    }
});

var AdminPeopleTabs = React.createClass({
    handleClick: function(e) {
        e.preventDefault();
        var page = e.target.id;
        this.props.onPageChange(page);
    },
    render: function() {
       return (
           <ul className="nav nav-pills mj-pills" role="tablist">
               <li role="presentation" className="active" onClick={this.handleClick}><a href="#" id="students" aria-controls="students" role="tab" data-toggle="tab">Students</a></li>
               <li role="presentation" onClick={this.handleClick}><a href="#" id="judges" aria-controls="judges" role="tab" data-toggle="tab">Judges</a></li>

           </ul>
       );
    }
});

