var Chk = function (id) {
    this.id = id;
    this.state = 0; //0 un, 1 chk, 2 inter
    this.chk = '';
    this.children = [];
    this.type = 0;
    this.term = 0;
    this.filter = 0;
};
Chk.prototype.construct = function () {
    this.chk = $("#" + this.id)
};
Chk.prototype.getId = function () {
    return this.id
};
Chk.prototype.setId = function (id) {
    this.id = id
};
Chk.prototype.getType = function () {
    return this.type
};
Chk.prototype.setType = function (type) {
    this.type = type
};
Chk.prototype.getState = function () {
    return this.state
};
Chk.prototype.setState = function (state) {
    this.state = state
    if (this.type == 0) {
        switch (this.state) {
            case 0:
                this.chk.data('checked', 0);
                this.chk.prop('indeterminate', false);
                this.chk.prop('checked', false);
                break;
            case 1:
                this.chk.data('checked', 1);
                this.chk.prop('indeterminate', false);
                this.chk.prop('checked', true);
                break;
            case 2:
                this.chk.data('checked', 1);
                this.chk.prop('checked', true);
                this.chk.prop('indeterminate', true);
        }
    }
    else {
        switch (this.state) {
            case 0:
                this.chk.removeClass('active');
                break;
            default:
                this.chk.addClass('active');
                break;
        }
    }
};
Chk.prototype.toggleChildren = function (state) {
    this.setState(state);
    if (this.children.length > 0) {
        var c;
        for (c in this.children) {
            this.children[c].toggleChildren(state);
        }
    }
};
var traversed = [""];
Chk.prototype.toggleAllParents = function () {
    var i, j, k, l;
    for (k in Chks) {
        Chks[k].toggle();
    }
    for (i in rows) {
        rows[i].toggle();
    }
    for (j in cols) {
        cols[j].toggle();
    }
    all.toggle();
};
Chk.prototype.toggle = function () {
    var c;
    var checked = 0;
    var indeterminate = 0;
    var num = this.children.length;
    for (c in this.children) {
        if (this.children[c].state == 2) {
            indeterminate++;
        }
        else if (this.children[c].state == 1) {
            checked++;
        }
    }

    if (indeterminate == 0 && checked == 0) {
        this.setState(0);
    }
    else if (checked == num) {
        this.setState(1);
    }
    else if (checked > 0 || indeterminate > 0) {
        this.setState(2);
    }
};
Chk.prototype.click = function () {
    var state;
    switch (this.state) {
        case 0:
            this.toggleChildren(1);
            break;
        default:
            this.toggleChildren(0);
            break;
    }
    this.toggleAllParents();
};
Chk.prototype.getChildren = function () {
    return this.children
};
Chk.prototype.setChildren = function (children) {
    this.children = children
};
Chk.prototype.getChildren = function (i) {
    return this.children[i]
};
Chk.prototype.addChild = function (child) {
    this.children.push(child)
};
Chk.prototype.delChild = function (child) {
    this.children.splice(this.children.indexOf(child), 1)
};
Chk.prototype.addData = function (term, filter) {
    this.term = term;
    this.filter = filter;
};

var all = new Chk();
var cols = [];
var rows = [];
var Chks = [];
var fils = [];
var content = []

var Email = React.createClass({
    handleClick: function (e) {
        var extras = $("#extras").val().split("\n");
        this.props.handler(fils, extras);
    },
    componentWillUnmount: function () {
        if (!Back) {
            Navigation.push("adminEmail");
        }
        else {
            Back = false;
        }
    },
    componentDidMount: function () {
        TermEntity.loadTerms();
    },
    handleRow: function (e) {
        e.stopPropagation();
        var id = e.target.id.split("-");
        rows[id[1]].click();
    },
    handleCol: function (e) {
        e.stopPropagation();
        var id = e.target.id.split("-");
        cols[id[1]].click();
    },
    handleField: function (e) {
        e.stopPropagation();
        var id = e.target.id.split("-");
        Chks[id[1]].click();
    },
    handleAll: function (e) {
        e.stopPropagation();
        all.click();
    },
    handleFilter: function (e) {
        e.stopPropagation();
        e.preventDefault();
        var id = e.target.id.split("-");
        fils[id[1]].click();
    },
    getInitialState: function () {
        Filter = [];
        $(TermEntity).on('TermsHasChanged', function () {
            this.setState({terms: TermEntity.getTerm()});
        }.bind(this));
        return ({terms: 0})
    },
    componentDidUpdate: function () {
        var i, j, k;
        all.construct();
        for (i in rows) {
            rows[i].construct();
            rows[i].setType(0);
        }
        for (j in cols) {
            cols[j].construct();
            cols[j].setType(0);

        }
        for (i in Chks) {
            Chks[i].construct();
            Chks[i].setType(0);
        }
        for (k in fils) {
            fils[k].construct();
            fils[k].setType(1);
        }
    },
    render: function () {

        if (this.state.terms != 0) {
            var i = 0;
            var j = 0;
            var k = 0;
            var filtercounter = 0;
            var fieldcounter = 0;
            var id = 0;
            var colfilter = ["Students", "Judges"];
            var filters = [["AC", "DR", "IN"], ["PR", "IN", "RJ", "PE", "RG", "AT", "ST", "GR", "RE"]];
            all.setId("all");
            var head = [
                <th key="all" style={{textAlign: 'center'}}>
                    <input type="checkbox" id="all" onClick={this.handleAll}/> Terms
                </th>
            ];

            for (j in colfilter) {
                //console.log(j);
                id = "col-" + j;
                var colchk = new Chk(id);
                head.push([
                    <th key={id} style={{textAlign: 'center'}}>
                        <input type="checkbox" id={id} onClick={this.handleCol}/> {colfilter[j]}
                    </th>
                ]);
                all.addChild(colchk);
                cols.push(colchk)
            }

            var body = [];
            for (i in this.state.terms) {
                var term = this.state.terms[i].name;
                //console.log('Current Term Name: ', term);
                id = "row-" + i;
                var rowchk = new Chk(id);
                var tempbody = [<td key={id} style={{textAlign: 'center'}}><input type="checkbox" id={id}
                                                                                  onClick={this.handleRow}/> {this.state.terms[i].name}
                </td>];
                for (j in colfilter) {
                    id = "field-" + fieldcounter;
                    fieldcounter++;
                    var fieldchk = new Chk(id);
                    cols[j].addChild(fieldchk);
                    rowchk.addChild(fieldchk);
                    var filter = [];
                    for (k in filters[j]) {
                        var fid = "filter-" + filtercounter;
                        filtercounter++;
                        var filterchk = new Chk(fid);
                        filterchk.addData(this.state.terms[i].id, filters[j][k]);
                        filter.push([
                            <button key={fid} id={fid} filt={filters[j][k]} term={term} className="btn btn-lightblue btn-filter2"
                                    onClick={this.handleFilter}>
                                {filters[j][k]}
                            </button>]);
                        fieldchk.addChild(filterchk);
                        fils.push(filterchk);
                    }
                    Chks.push(fieldchk);
                    tempbody.push([<td key={id} style={{textAlign: 'center'}}><input type="checkbox" id={id}
                                                                                     onClick={this.handleField}/> {filter}
                    </td>]);
                }
                all.addChild(rowchk);
                rows.push(rowchk);
                body.push([<tr key={id}>{tempbody}</tr>]);
            }
        }
        var rendering = [
            <div id="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">
                <thead>
                {head}
                </thead>
                <tbody>
                {body}
                </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>];

        return (
            <div className="container">
            {rendering}
            </div>
        )
    },
});