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

var Filter = [];

function createXHR() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
}

function inFilter(obj) {
    ////console.log(Filter.indexOf(obj));
    return (Filter.indexOf(obj) != -1);
}

function filterPush(obj)
{
    inFilter(obj) ?  Filter.splice(Filter.indexOf(obj),1) : Filter.push(obj);
}

var AdminPeopleJudges = React.createClass({
    handleClick: function(i, e) {
        e.preventDefault();
        filterPush(i);
        if(table != '') {
            table.destroy();
        }
        this.props.onPageChange("judges");
    },
    handleImportClick: function(e) {
        document.getElementById("import-select").click();
    },
    handleImport: function(e) {
        e.preventDefault();
        var form = document.getElementById('import-judge');
        var fileSelect = document.getElementById('import-select');
        var uploadButton = document.getElementById('import-button');
        uploadButton.innerHTML = 'Uploading';
        var files = fileSelect.files;
        var file = files[0];
        var xhr = createXHR();
        // Open the connection.
        xhr.open('POST', '/api/importJudges', true);
        // Set up a handler for when the request finishes.
        xhr.onload = function () {
            if (xhr.status === 200) {
                // File(s) uploaded.

                uploadButton.innerHTML = 'Import';
                alert(xhr.responseText);
                xhr.abort();
                this.props.onPageChange("judges");
            } else {
                alert('An error occurred!');
            }
        };
        xhr.send(file);
    },
    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, "Prospective")}>
                                        Pr
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Invited")}>
                                        In
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Rejected")}>
                                        Rj
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Pending")}>
                                        Pe
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Registered")}>
                                        Rg
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Attended")}>
                                        At
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Started Grading")}>
                                        St
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Graded")}>
                                        Gr
                                    </button>
                                    <button className="btn btn-lightblue btn-filter" onClick={this.handleClick.bind(null, "Removed")}>
                                        Rm
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td style={{textAlign: 'right', verticalAlign: 'bottom'}}>
                            <form id="import-judge" action="importJudges.php" method="POST">
                                <button id="import-button" type="button" className="btn btn-lightblue" onClick={this.handleImportClick}>Import</button>
                                <input id="import-select" name="import-select" type="file" className="btn btn-lightblue" onChange={this.handleImport} style={{display:'none'}}/>
                            </form>
                        </td>
                    </tr>
                </table>
                <AdminPeopleJudgesRows />
            </div>
        );
    }
});

var AdminPeopleJudgesRows = React.createClass({
    getInitialState: function() {
        return (
        {items: []}
        )
    },
    componentDidMount: function() {
        UserEntity.loadJudgesInfo();
        $(UserEntity).on('JudgesHasChanged', function() {
            this.setState({ items: UserEntity.getJudgesInfo() });
            $(UserEntity).off('JudgesHasChanged');
        }.bind(this))
    },
    componentDidUpdate: function () {
        table = $('#peopleJudges').DataTable();
    },
    render: function() {
        var items = this.state.items;
        var i = 0;
        return (
            <table className="table table-bordered" id="peopleJudges">
                <thead>
                <tr>
                    <td>Judges</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))
                    {
                        //console.log(i);
                        return [
                            <tr key={key} id={key}>
                                <td>{data.fname} {data.lname}
                                    <br /><small><small>Email: {data.email}</small></small>
                                    <br /><small><small>Affiliation: {data.affiliation}</small></small>
                                    <br /><small><small>Title: {data.title}</small></small>
                                    <br /><small><small>Status: {state}</small></small>
                                </td>
                            </tr>];
                    }
                })
            }
            </tbody>
            </table>

        );
    }
});