import React, { Component } from 'react'
import { HelpBlock, Button, Table } from 'react-bootstrap'

export default class Users extends Component {
  render() {
    const { users } = this.props
    return (<span><UserList list={users} /></span>)
  }
}

export class UserList extends Component {
  render(){
    const { handleResetPassword, list, resetPasswordError } = this.props
    const userList = list && list.map(
        (user, i) =>
          <User
            handleResetPassword={handleResetPassword}
            key={i}
            resetPasswordError={resetPasswordError}
            user={user}
          />)

    return(<Table className='ft-list' responsive>
      <thead>
        <tr>
          <th>First</th>
          <th>Last</th>
        </tr>
      </thead>
      <tbody>{userList}</tbody>
    </Table>)
  }
}

export class User extends Component {
  render() {
    const { uuid, firstName, lastName, email } = this.props.user

    return (
      <tr>
        <td>{firstName}</td>
        <td>{lastName}</td>
        <td>
          <HelpBlock className='ft-email-error' disabled={this.props.resetPasswordError}>{this.props.resetPasswordError}</HelpBlock>
          <Button
            bsStyle='link'
            onClick={this.props.handleResetPassword}
          >
            reset password
          </Button></td>
      </tr>
    )
  }
}