import React from 'react'

import client from '../client'

export default class UserList extends React.Component {
  constructor(props){
    super()
    console.log("WHAT")
    this.state = {
      users: [],
    }
//     client.service('users').find({
//       query: {
//         '$sort': { 'date': '-1' },
//         token: client.get('token'),
//       },
//     }).then((data) => {
//       this.setState(data)
//     }).catch((error) => {
//       console.error(error)
//     })
    this.pick.bind(this)
  }
  pick(){
  }
  render() {
    const items = this.state.users.map((item,i) => {
      return (
        <UserItem key={user.id}
          user={user}
          onClick={this.pick}
          onDelete={this.handleDelete} />
      )
    })
    return (
      <div>
        {items}
      </div>
    )
  }
}

class UserItem extends React.Component {
  constructor() {
    super()
    this.remove = this.remove.bind(this)
  }
  remove(e) {
    e.stopPropagation()
    const userid = this.props.user.id
    const usersService = client.service('users')
    const params = { query: { token: client.get('token') } }
    usersService.remove(userid, params).then(result => {
      this.props.onDelete(userid)
    }).catch(error => {
      console.error(error)
    })
  }
  render() {
    const user = this.props.user
    // const canEdit = this.props.user.userid === this.props.currentUser.id ? 'canEdit' : ''
    const canEdit = 'canEdit'
    const date = parseDate(meal.date)
    const time = parseTime(meal.date)
    return (
      <div className={'user row ' + canEdit} onClick={() => this.props.onClick(meal)}>
        <div className='name'>{meal.name}</div>
        <div className='calories'>{meal.calories} cal</div>
        <div className='date'>{date}</div>
        <div className='time'>{time}</div>
        <div className='remove' onClick={this.remove}>x</div>
      </div>
    )
  }
}