import React from 'react'

const emptyUser = {
  _id: null,
  name: "",
  username: "",
  password: "",
}

class UserList extends React.Component {
  constructor () {
    super()
    this.loadUser = this.loadUser.bind(this)
    this.saveUser = this.saveUser.bind(this)
    this.deleteUser = this.deleteUser.bind(this)
    this.clearUser = this.clearUser.bind(this)
    this.handleChange = this.handleChange.bind(this)

    this.state = { user: emptyUser }
  }

  loadUser (key, event) {
    event.preventDefault()
    const { _id, name, username } = this.props.users.users[key]
    this.setState({ user: 
      { _id,
        name,
        username,
        password: "",
        key
      }
    })
    console.log(this.state, this.props.users.users[key], this.state.user === this.props.users.users[key])
  }

  saveUser (key, event) {
    event.preventDefault()
    if (this.state.user._id) {
      console.log('Saving existing user.')
      this.props.usersActions.updateUserRequest(this.state.user)
    } else {
      console.log('Adding new user.', this.state.user)
      this.props.usersActions.addUserRequest(this.state.user)
    }
  }

  deleteUser (key, event) {
    event.preventDefault()
    console.log('Deleting user user.')
  }

  clearUser (event) {
    event.preventDefault()
    console.log('Clearing user form.')
    this.setState({ user: emptyUser })
  }

  handleChange (event) {
    this.setState({ 
      user: {
        ...this.state.user,
        name: this.name.value,
        username: this.username.value,
        password: this.password.value
      }
    })
  }

  render () {
    const state = this.props.users
    const { user } = this.state

    return (
      <div>
        <form>
          <h2>{(user._id) ? "Benutzer editieren" : "Neuer Benutzer"}</h2>
          {user._id ? <input type="hidden" key="userid" value={user._id} ref={(input) => {this.userid = input}} id="userid"/> : null}
          <label htmlFor="name">Name</label>
          <input type="input" ref={(input) => {this.name = input}} id="name" value={user.name} placeholder="Name" onChange={this.handleChange}></input>
          <label htmlFor="username">Benutzername</label>
          <input type="input" ref={(input) => {this.username = input}} id="username" value={user.username} placeholder="Benutzername" onChange={this.handleChange}></input>
          <label htmlFor="password">Passwort</label>
          <input type="password" ref={(input) => {this.password = input}} id="password" value={user.password} placeholder="Passwort" onChange={this.handleChange}></input>
          <input type="submit" value={this.state.user._id ? "Aenderungen speichern" : "Benutzer anlegen"} onClick={(event) => this.saveUser(this.state.user.key, event)} />
          <input type="reset" value={this.state.user._id ? "Abbrechen" : "Loeschen"} onClick={(event) => this.clearUser(event)} />
        </form>
        <table className='table table-bordered table-striped'>
          <thead>
            <tr>
              <th>Name</th><th>Benutzername</th><th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {state.users ? state.users.map((user, key) => 
            <tr key={key}>
              <td>{user.name}</td>
              <td>{user.username}</td>
              <td>
                <a href="#" onClick={(event) => this.loadUser(key, event)}>editieren</a>
                <a href="#" onClick={(event) => this.deleteUser(key, event)}>loeschen</a>
              </td>
            </tr>
            ) : ""}
          </tbody>
        </table>
      </div>
    )
  }
}

export default UserList
