var UserBox = React.createClass({
    getInitialState: function () {
        return {
            data: [],
            roledata: [],
            viewthepage: 0
        };
    },

    loadAllowLogin: function () {
        $.ajax({
            url: '/getloggedin',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ viewthepage: data }, function () {
                    console.log("Logged in:" + this.state.viewthepage);

                    if (this.state.viewthepage != 0) {
                        this.loadUserRoles();
                        this.loadUsersFromServer();
                    }
                }.bind(this));
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    loadUserRoles: function () {
        $.ajax({
            url: '/getuserroles/',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ roledata: data });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    loadUsersFromServer: function () {
        var theuserid = "";
        var theusername = "";
        var theuseremail = "";
        var theuserrole = "";
        var theuseractive = "1";

        if (document.getElementById('userid')) {
            theuserid = userid.value;
        }
        if (document.getElementById('username')) {
            theusername = username.value;
        }
        if (document.getElementById('useremail')) {
            theuseremail = useremail.value;
        }
        if (document.getElementById('userrole')) {
            theuserrole = userrole.value;
        }
        if (document.getElementById('useractive')) {
            theuseractive = useractive.value;
        }

        $.ajax({
            url: '/getusers',
            data: {
                'userid': theuserid,
                'username': theusername,
                'useremail': theuseremail,
                'userrole': theuserrole,
                'useractive': theuseractive
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    componentDidMount: function () {
        this.loadAllowLogin();
    },

    render: function () {
        if (this.state.viewthepage == 0) {
            return (
                <div>NO ACCESS</div>
            );
        } else {
            return (
                <div>
                    <h1>Users</h1>
                    <Userform2
                        onUserSubmit={this.loadUsersFromServer}
                        data={this.state.roledata}
                    />
                    <br />
                    <table>
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Active</th>
                            </tr>
                        </thead>
                        <UserList data={this.state.data} />
                    </table>
                </div>
            );
        }
    }
});

var Userform2 = React.createClass({
    getInitialState: function () {
        return {
            userid: "",
            username: "",
            useremail: ""
        };
    },

    handleSubmit: function (e) {
        e.preventDefault();

        var theuserid = this.state.userid.trim();
        var theusername = this.state.username.trim();
        var theuseremail = this.state.useremail.trim();
        var theuserrole = document.getElementById('userrole').value;
        var theuseractive = document.getElementById('useractive').value;

        this.props.onUserSubmit({
            userid: theuserid,
            username: theusername,
            useremail: theuseremail,
            userrole: theuserrole,
            useractive: theuseractive
        });
    },

    handleChange: function (event) {
        this.setState({
            [event.target.id]: event.target.value
        });
    },

    render: function () {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h2>Users</h2>
                    <table>
                        <tbody>
                            <tr>
                                <th>User ID</th>
                                <td>
                                    <input
                                        type="text"
                                        name="userid"
                                        id="userid"
                                        value={this.state.userid}
                                        onChange={this.handleChange}
                                    />
                                </td>
                            </tr>
                            <tr>
                                <th>Username</th>
                                <td>
                                    <input
                                        name="username"
                                        id="username"
                                        value={this.state.username}
                                        onChange={this.handleChange}
                                    />
                                </td>
                            </tr>
                            <tr>
                                <th>Email</th>
                                <td>
                                    <input
                                        name="useremail"
                                        id="useremail"
                                        value={this.state.useremail}
                                        onChange={this.handleChange}
                                    />
                                </td>
                            </tr>
                            <tr>
                                <th>Role</th>
                                <td><UserRoleSelectList data={this.props.data} /></td>
                            </tr>
                            <tr>
                                <th>Active Status</th>
                                <td><UserActiveSelectList /></td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="submit" value="Search User" />
                </form>
            </div>
        );
    }
});

var UserRoleSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (roles) {
            return (
                <option
                    key={roles.dbUserRoleId}
                    value={roles.dbUserRoleId}
                >
                    {roles.dbUserRoleName}
                </option>
            );
        });

        return (
            <select name="userrole" id="userrole">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

var UserActiveSelectList = React.createClass({
    render: function () {
        return (
            <select name="useractive" id="useractive">
                <option value="1">Active Only</option>
                <option value="0">Inactive Only</option>
                <option value="2">All</option>
            </select>
        );
    }
});

var UserList = React.createClass({
    render: function () {
        var userNodes = this.props.data.map(function (user) {
            return (
                <User
                    key={user.dbUserId}
                    userid={user.dbUserId}
                    username={user.dbUsername}
                    useremail={user.dbUserEmail}
                    userrole={user.dbUserRole}
                    useractive={user.dbIsActive}
                >
                </User>
            );
        });

        return (
            <tbody>
                {userNodes}
            </tbody>
        );
    }
});

var User = React.createClass({
    render: function () {
        var therole = "";
        var theactive = "";

        if (this.props.userrole == 1) {
            therole = "MANAGER";
        } else if (this.props.userrole == 2) {
            therole = "TRAINER";
        } else {
            therole = this.props.userrole;
        }

        if (this.props.useractive == 1) {
            theactive = "ACTIVE";
        } else {
            theactive = "INACTIVE";
        }

        return (
            <tr>
                <td>{this.props.userid}</td>
                <td>{this.props.username}</td>
                <td>{this.props.useremail}</td>
                <td>{therole}</td>
                <td>{theactive}</td>
            </tr>
        );
    }
});

ReactDOM.render(
    <UserBox />,
    document.getElementById('content')
);