import React from 'react'
import ModalDialog from './ModalDialog.jsx'
import UserList from './UserList.jsx'
import MealList from './MealList.jsx'

import client from '../client'

export default class LoggedInView extends React.Component {
  constructor(props) {
    super()
    this.state = {
      user: Object.assign({}, props.user),
      mode: 'meals',
    }
    this.updateUser = this.updateUser.bind(this)
    this.toggleMode = this.toggleMode.bind(this)
  }
  toggleMode(){
    this.state.mode = this.state.mode == 'meals' ? 'users' : 'meals'
  }
  updateUser(user) {
    this.setState({
      user: user
    })
  }
  render() {
    let activity = null
    if (this.state.mode == 'meals') {
      activity = (<MealList user={this.state.user} currentUser={this.props.user} />)
    }
    else {
      activity = (<UserList user={this.state.user} currentUser={this.props.user} updateUser={this.updateUser} />)
    }
    return (
      <div>
        <Menu mode={this.state.mode}
              user={this.state.user}
              toggleMode={this.toggleMode}
              currentUser={this.props.user}
              updateUser={this.updateUser} />
        {activity}
      </div>
    )
  }
}


class Menu extends React.Component {
  constructor() {
    super()
    this.setGoal = this.setGoal.bind(this)
    this.logout = this.logout.bind(this)
  }
  setGoal() {
    const goal = Math.abs(parseInt(prompt('Please enter your calorie goal', this.props.user.goal)))
    if (goal) {
      client.service('users').patch(this.props.user.id, {
        goal: goal,
        token: client.get('token'),
      }).then((user) => {
        this.props.updateUser(user)
      })
    }
  }
  logout() {
    client.logout().then(() => {
      window.location.reload()
    })
  }
  render() {
    const user = this.props.user
    const items = []
    items.push( <li key='hello'>Hello {user.email}</li> )
    items.push( <li key='goal'><a href='#' onClick={this.setGoal}>Goal</a>: {user.goal}</li> )
    switch (user.role) {
      case 'admin':
        if (this.props.user.id !== this.props.currentUser.id) {
          items.push( <li key='resetUser'><a href='#' onClick={this.resetUser}>Reset User</a></li> )
        }
        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Users</a></li> )
        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Meals</a></li> )
        break
      case 'manager':
        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Users</a></li> )
        items.push( <li key='userlist'><a href='#' onClick={this.props.toggleMode}>Meals</a></li> )
      case 'user':
        break
    }
    items.push( <li key='logout'><a href='#' onClick={this.logout}>Logout</a></li> )

    return (
      <div>
        <ul className='menu'>
          {items}
        </ul>
      </div>
    )
    // <ProfileModal user={user} visible={false} onClose={() => {}} />
  }
}


// class ProfileModal extends React.Component {
//   render() {
//     return (
//       <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
//       </ModalDialog>
//     )
//   }
// }