import React from 'react'

function uploadImage() {}

function Profile(props) {
  const user = props.user
  user['createdAt'] = '2019-06-23T10:59:10'
  user['username'] = user.name || 'Me'
  user['display_name'] = user.name || 'Me'
  user['avatar'] = user.avatar || '/img/default-user-image.png'
  user['projects'] = [1]

  // file upload
  // https://www.npmjs.com/package/bootstrap-imageupload
  //$('#my-imageupload').imageupload()

  return (
    <div>
      <form className="form-group" name="profile">
        <ul className="list-group">
          <li className="list-group-item row">
            <span className="col-lg-1 col-md-1 col-sm-1 col-xs-1">Name:</span>
            <span className="col">{user.username}</span>
          </li>
          <li className="list-group-item row">
            <span className="col">Display name</span>
            <input
              className="col-lg-5 col-md-5 col-sm-5 col-xs-5"
              type="text"
              name="username"
              value={user.display_name}
              onChange={props.handleChange}
            />
          </li>
          <li className="list-group-item row">
            <span className="col">Avatar:</span>
            <img
              className="img-fluid"
              src={user.avatar}
              alt="avatar"
              onClick={uploadImage}
            />
            <input type="file" name="image-file" />
          </li>
          <li className="list-group-item row">
            <span className="col">created:</span>
            <span className="col">{user.createdAt}</span>
          </li>
          <li className="list-group-item row">
            <span className="col-sm-1">projects:</span>
            {user.projects.length > 0 &&
              user.projects.map(id => {
                const project = props.projects.find(p => p.id === id)
                return (
                  <span
                    key={project.id}
                    onClick={() => props.selectProject(id)}
                  >
                    {project.name}
                  </span>
                )
              })}
          </li>
          <li className="list-group-item row">
            <input
              className="btn btn-outline-success col"
              type="submit"
              onClick={props.updateTask}
              value="Save"
            />
          </li>
        </ul>
      </form>
    </div>
  )
}

export default Profile