import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, List, Icon, Button, Image } from '../ui'
import { Constants, api } from '../helpers'
import './UserList.scss'

const selectionOptions = Constants.accessLevels.concat([{ value: 'all', text: 'All Levels' }])

export class UserList extends React.Component {
  static propTypes = {
    users: PropTypes.array,
    onUserListClick: PropTypes.func,
    selectedUser: PropTypes.object,
    selectionModified: PropTypes.bool,
    onAddNewUser: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      users: null
    }
    this.filterUsers = this.filterUsers.bind(this)
  }

  componentWillReceiveProps(nextProps) {
    // This ensures that the original list is populated with 'all' by default,
    // due to the component mounting before users are returned (by api)
    if (nextProps.users !== this.props.users) {
      this.setState({ users: nextProps.users })
    }
  }

  filterUsers(e, data) {
    e.preventDefault()
    let users = this.props.users
    if (data.value !== 'all') {
      users = users.filter(user => data.value === user.role)
    }
    this.setState({ users })
  }

  render() {
    return (
      <div>
        <Dropdown placeholder='All Registered Users' selection fluid
          options={selectionOptions} onChange={this.filterUsers} />
        <List className='user-list' size='big' selection verticalAlign='middle'>
          {
          this.state.users
          ? this.state.users.map((user, index) =>
            (<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
              active={user === this.props.selectedUser} data-index={index}>
              <Image avatar src={api.makeImageUrl(user.thumbnailImageId, Constants.smallUserImageSize)} />
              <List.Content>
                { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
                { user === this.props.selectedUser && this.props.selectionModified ? <Icon className='user-update'
                  name='edit' /> : null }
              </List.Content>
            </List.Item>)
          )
          : null
          }
        </List>
        <Button className='add-new-user' content='Add New User' primary onClick={this.props.onAddNewUser} />
      </div>
    )
  }
}