var React = require('React');
var ReactRouter = require('react-router');
var Link = require('react-router').Link;
var Loader = require('halogen/PulseLoader');

var Modal = require('./ModalComponent.jsx');

/**
 * The TeamUserRow displays information pertaining to a single
 * Mock User and displays buttons for actions pertaining to that
 * user.
 */
var TeamUserRow = React.createClass({

    getInitialState: function() {
        return {filtered: false};
    },

    componentWillReceiveProps: function(nextProps) {
        this.updateFiltered(nextProps.filter);
    },

    render: function() {
        console.log(this.context);
        return(
            <tr hidden={this.state.filtered}>
                <td>{ this.props.user.mock_user }</td>
                <td>{ this.props.user.url }</td>
                <td>{ this.props.user.dynamic_mode.toUpperCase() }</td>
                <td>
                    <Link to="endpoint" params={{teamId: this.props.teamName, profileName: this.props.user.mock_user}}>
                        <button className="fa fa-eye"></button>
                    </Link>
                    <button className="fa fa-plus-circle"></button>
                    <button className="fa fa-files-o"></button>
                    <button className="fa fa-trash-o"></button>
                </td>
            </tr>
        );
    },

    /**
     * Applies a filter string and determines if this row
     * should be hidden.
     * @param newFilter the new filter to apply
     */
    updateFiltered: function(newFilter) {
        // Creates a fuzzy regex to see if we need to show this row
        // e.g. "hey" -> "h.*?e.*?y.*"
        var fuzzyRegex = newFilter.toLowerCase().split("").join(".*?") + ".*";
        var re = new RegExp(fuzzyRegex);
        var matches = re.test(this.props.user.mock_user.toLowerCase());

        this.setState({filtered: !matches});
    }

});

/**
 * The TeamNavigationBar component has the controls
 * to add a user, to import Mock Data, and to filter
 * the list of users.
 */
var TeamNavigationBar = React.createClass({
   render: function() {
       return (
           <header className="team-navigation-bar" role="banner">
               <input type="search" placeholder="Filter Users" onChange={this.props.onFilterUsers} />
               <button onClick={this.props.createUserButtonClicked}>Create User</button>
           </header>
       );
   }
});

/**
 * The TeamPage component shows a list of users that exist
 * for the current team and some information about them.
 * It also allows the creation of new mock users and the ability
 * to filter the list using a search bar.
 */
var TeamPage = React.createClass({

    /**
     * The initial state has no users and is loading.
     * This is updated on an ajax callback once we have data.
     * We also initialize with no filter to match, showing all users.
     * @returns {{users: null, loading: boolean, filter: string}}
     */
    getInitialState: function() {
        return {users: null, loading: true, filter: "", isCreatingUser: false};
    },

    /**
     * As soon as the component as mounted we want to make
     * an AJAX call and fetch the user data. Once we have it
     * we exit the loading state.
     */
    componentDidMount: function () {
        $.ajax({
            url: "/api/teams/" + this.props.params.teamID,
            dataType: "json",
            success: function (data) {
                this.setState({users: data, loading: false});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }
        });
    },

    /**
     * Updates our state from the TeamNavigationBar
     * so that we can show and hide our user rows accordingly.
     * @param event the input change event containing the new filter
     */
    onFilterUsers: function (event) {
        this.setState({filter: event.target.value});
    },

   render: function() {
       console.log(this.context);
       // Display a loading message if we are in loading mode
       // if we aren't loading, create a table of data
       var tableData;
       var loader;
       if (this.state.loading) {
           loader = <tr><Loader color="#26A65B" size="16px" margin="4px"/></tr>;
       } else {
           tableData = [];
           console.log(this.navigateToEndpointPage);
           for (var i = 0; i < this.state.users.length; i++) {
               var user = this.state.users[i];
               tableData.push(<TeamUserRow key={i} user={user}
                                           filter={this.state.filter} team={this.props.params.teamID} />);
           }
       }

       return (
         <div id="team-page">
             <TeamNavigationBar teamName={this.props.params.teamID}
                                createUserButtonClicked={this.showCreateUserModal}
                                onFilterUsers={this.onFilterUsers} />
             {loader}
             <table>
                 <tr>
                     <th>User</th>
                     <th>Endpoint URL</th>
                     <th>Mode</th>
                     <th>Actions</th>
                 </tr>
                 <tbody>
                    {tableData}
                 </tbody>
             </table>

             <Modal hidden={!this.state.isCreatingUser}
                    message="Enter New User Info"
                    fields={["Name", "Endpoint URL"]}
                    onConfirm={this.handleCreateUser}
                    onCancel={this.dismissCreateUserModal} />
         </div>
       );
   },

   /////////////////////////////////////
   // Create User Modal Functionality //
   /////////////////////////////////////

   handleCreateUser: function(userData) {
       $.ajax({
          type: "POST",
          url: "/api/users/" + this.props.params.teamID,
          data: {mock_name: userData["Name"], url: userData["Endpoint URL"]},
          success: function(data) {
              var newUsers = this.state.users;
              newUsers.push(data.user);
              this.setState({users: newUsers});
          }.bind(this)
       });

       this.dismissCreateUserModal();
   },

   showCreateUserModal: function() {
       this.setState({isCreatingUser: true});
   },

   dismissCreateUserModal: function() {
       this.setState({isCreatingUser: false});
   }

});

module.exports = TeamPage;