import React, { Component, PropTypes } from 'react';

import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import FlatButton from 'material-ui/FlatButton';
import { List, ListItem } from 'material-ui/List';
import CircularProgress from 'material-ui/CircularProgress';
import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
import AccountCircle from 'material-ui/svg-icons/action/account-circle';

export default class extends Component {
  static propTypes = {
    fetching: PropTypes.bool.isRequired,
    didInvalidate: PropTypes.bool.isRequired,
    items: PropTypes.array.isRequired,
    find: PropTypes.func.isRequired
  }
  componentDidMount() {
    this.props.find();
  }
  render() {
    return (
      <div className="user-list">
        <Paper zDepth={1}>
          <List>
            <Subheader inset={true}>Users</Subheader>
            <Divider/>
            {(() => {
              if (this.props.fetching) {
                return (<CircularProgress/>)
              } else {
                return this.props.items.map(item => <ListItem
                  key={item.id}
                  primaryText={`${item.first_name} ${item.last_name}`}
                  secondaryText={item.description}
                  leftAvatar={<Avatar icon={<AccountCircle/>}/>}
                  rightIcon={<ChevronRight/>}
                />)
              }
            })()}
            <ListItem
              primaryText="Add New User"
              linkButton={true}
              href="#/create/user"
              rightIcon={<ChevronRight/>}
            />
          </List>
        </Paper>
      </div>
    )
  }
}
