// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx');
var Client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');

var MemberListTeamItem = React.createClass({
    handleMakeMember: function() {
        var data = {};
        data["user_id"] = this.props.user.id;
        data["new_roles"] = "";

        Client.updateRoles(data,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeActive: function() {
        Client.updateActive(this.props.user.id, true,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeNotActive: function() {
        Client.updateActive(this.props.user.id, false,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeAdmin: function() {
        var data = {};
        data["user_id"] = this.props.user.id;
        data["new_roles"] = "admin";

        Client.updateRoles(data,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
     getInitialState: function() {
        return {};
    },
    render: function() {
        var server_error = this.state.server_error ? <div style={{ clear: "both" }} className="has-error"><label className='has-error control-label'>{this.state.server_error}</label></div> : null;
        var user = this.props.user;
        var currentRoles = "Member"

        if (user.roles.length > 0) {
            currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1);
        }

        var email = user.email.length > 0 ? user.email : "";
        var showMakeMember = user.roles == "admin";
        var showMakeAdmin = user.roles == "";
        var showMakeActive = false;
        var showMakeNotActive = true;

        if (user.delete_at > 0) {
            currentRoles = "Inactive";
            showMakeMember = false;
            showMakeAdmin = false;
            showMakeActive = true;
            showMakeNotActive = false;
        }

        return (
            <div className="row member-div">
                <img className="post-profile-img pull-left" src={"/api/v1/users/" + user.id + "/image"} height="36" width="36" />
                <span className="member-name">{user.full_name.trim() ? user.full_name : user.username}</span>
                <span className="member-email">{user.full_name.trim() ? user.username : email}</span>
                <div className="dropdown member-drop">
                    <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
                        <span>{currentRoles}  </span>
                        <span className="caret"></span>
                    </a>
                    <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown">
                        { showMakeAdmin ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeAdmin}>Make Admin</a></li> : "" }
                        { showMakeMember ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeMember}>Make Member</a></li> : "" }
                        { showMakeActive ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeActive}>Make Active</a></li> : "" }
                        { showMakeNotActive ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeNotActive}>Make Inactive</a></li> : "" }
                    </ul>
                </div>
                { server_error }
            </div>
        );
    }
});


module.exports = React.createClass({
    render: function() {
        return (
            <div className="member-list-holder">
                {
                    this.props.users.map(function(user) {
                        return <MemberListTeamItem key={user.id} user={user} />;
                    }, this)
                }
            </div>
        );
    }
});