import React from 'react';
import { admin as adminApi } from '@devcms/sdk';

class TeamSettings extends React.Component {
  state = {
    users: [],
    loaded: false
  };

  componentDidMount() {
    this.fetchUsers();
  }

  fetchUsers() {
    adminApi.users.list().then(users => {
      this.setState({
        users: users,
        loaded: true
      });
    });
  }

  renderList() {
    if (!this.state.loaded) {
      return null;
    }

    return (
      <div className="box box-card">
        <div className="box-header">
          <div className="columns">
            <div className="column-6">
              <div className="box-title">Name</div>
            </div>
            <div className="column-6">
              <div className="box-title">Email</div>
            </div>
          </div>
        </div>
        <div className="box-content-table">
          {this.state.users.map((user) => {
            return (
              <div className="box-row" key={user.id}>
                <div className="columns align-center">
                  <div className="column-6">
                    <div className="box-title">{user.name}</div>
                  </div>
                  <div className="column-6">{user.email}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  render() {
    return (
      <React.Fragment>
        <div className="title">
          <div>
            <h1>Team</h1>
            <p>List of site administrators</p>
          </div>
        </div>
        {this.renderList()}
      </React.Fragment>
    );
  }
}

export default TeamSettings;
