/*** @jsx React.DOM */

var card_management = createReactClass({
    getInitialState: function(props) {
        return {
            users: window.users,
            user_search: {
                card: '',
            },
            searching: false,
        };
    },

    searchUsers: function(event) {
        this.setState({searching: true});
        AJAX.post(
            Link.get('searchusers'),
            {user_search: this.state.user_search},
            function(response) {
                this.setState({
                    users: response.users,
                    searching: false,
                });
            }.bind(this)
        );
        event.preventDefault();
    },

    renderID: function(user) {
        return <span>{user.id}</span>;
    },

    sortID: function(a, b) {
        return a.id - b.id;
    },

    renderUsername: function(user) {
        return user.username ?
            <span>{user.username}</span> :
            <span className="placeholder">anonymous account</span>;
    },

    sortUsername: function(a, b) {
        var au = a.username ? a.username : '\u10FFFF';
        var bu = b.username ? b.username : '\u10FFFF';
        return au.localeCompare(bu);
    },

    renderEmail: function(user) {
        return user.email ?
            <span>{user.email}</span> :
            <span className="placeholder">no email</span>;
    },

    sortEmail: function(a, b) {
        var ae = a.email ? a.email : '\u10FFFF';
        var be = b.email ? b.email : '\u10FFFF';
        return ae.localeCompare(be);
    },

    renderLinkedCards: function(user) {
        return user.linked_cards ?
            <span>{user.linked_cards}</span> :
            <span className="placeholder">none</span>;
    },

    sortLinkedCards: function(a, b) {
        var ac = a.linked_cards ? a.linked_cards : 0;
        var bc = b.linked_cards ? b.linked_cards : 0;
        return ac - bc;
    },

    renderLastPlayed: function(user) {
        return user.last_played ?
            <Timestamp className="lastplayed" timestamp={user.last_played} /> :
            <span className="placeholder">never</span>;
    },

    sortLastPlayed: function(a, b) {
        var ap = a.last_played ? a.last_played : 0;
        var bp = b.last_played ? b.last_played : 0;
        return ap - bp;
    },

    renderEditDeleteButton: function(user) {
        return <>
            <Nav
                title="view/edit"
                onClick={function(event) {
                    window.location=Link.get('viewuser', user.id);
                }.bind(this)}
            />
            <Delete
                onClick={function(event) {
			        this.deleteUser(user.id);
                    event.preventDefault();
                }.bind(this)}
            />
        </>;
    },

    deleteUser: function(userid) {
        $.confirm({
            escapeKey: 'Cancel',
            animation: 'none',
            closeAnimation: 'none',
            title: 'Delete User',
            content: (
                'Are you sure you want to delete this user? All of their game profiles, scores, ' +
                'PASELI balances and settings will be deleted along with the account itself.'
            ),
            buttons: {
                Delete: {
                    btnClass: 'delete',
                    action: function() {
                        AJAX.post(
                            Link.get('removeuser', userid),
                            {},
                            function(response) {
                                // If it succeeded, make an instant update request.
                                if (response.success) {
                                    this.setState({searching: true});
                                    AJAX.post(
                                        Link.get('searchusers'),
                                        {user_search: this.state.user_search},
                                        function(response) {
                                            this.setState({
                                                users: response.users,
                                                searching: false,
                                            });
                                        }.bind(this)
                                    );
                                }
                            }.bind(this)
                        );
                    }.bind(this),
                },
                Cancel: function() {
                },
            }
        });
        event.preventDefault();
    },

    render: function() {
        return (
            <div>
                <div className="section">
                    <h3>User Search</h3>
                    <form onSubmit={this.searchUsers}>
                        <label htmlFor="card">Card Number or Game ID:</label>
                        <br />
                        <input
                            type="text"
                            className="inline"
                            value={this.state.user_search.card}
                            onChange={function(event) {
                                var user = this.state.user_search;
                                user.card = event.target.value;
                                this.setState({user_search: user});
                            }.bind(this)}
                            name="card"
                        />
                        <input type="submit" value="search" />
                        { this.state.searching ?
                            <img className="loading" src={Link.get('static', window.assets + 'loading-16.gif')} /> :
                            null
                        }
                    </form>
                </div>
                <div className="section">
                    <h3>User List</h3>
                    <Table
                        className="list users"
                        columns={[
                            {
                                name: 'ID',
                                render: this.renderID,
                                sort: this.sortID,
                            },
                            {
                                name: 'Username',
                                render: this.renderUsername,
                                sort: this.sortUsername,
                            },
                            {
                                name: 'Email',
                                render: this.renderEmail,
                                sort: this.sortEmail,
                            },
                            {
                                name: 'Linked Cards',
                                render: this.renderLinkedCards,
                                sort: this.sortLinkedCards,
                            },
                            {
                                name: 'Last Played',
                                render: this.renderLastPlayed,
                                sort: this.sortLastPlayed,
                            },
                            {
                                name: '',
                                action: true,
                                render: this.renderEditDeleteButton,
                            }
                        ]}
                        rows={this.state.users}
                        emptymessage="There are no users to display."
                    />
                </div>
            </div>
        );
    },
});

ReactDOM.render(
    React.createElement(card_management, null),
    document.getElementById('content')
);