import React from 'react'

// TODO
// if (!this.props.selectedTaskId) {
//   props.navigate('tasks')
//   return null
// }

class UpdateTask extends React.Component {
  constructor(props) {
    super(props)
    const task = props.tasks.find(t => t.id === props.selectedTaskId)
    this.state = task
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

  render() {
    const oldDesc = this.props.tasks.find(t => t.id === this.state.id)['desc']
    return (
      <div>
        <h2>Task: {oldDesc}</h2>
        <form>
          <div className="form-group row">
            <label htmlFor="desc" className="col-sm-2 col-form-label">
              Task Description:
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                className="form-control"
                name="desc"
                value={this.state.desc}
                onChange={this.handleChange}
              />
            </div>
          </div>

          <div className="form-group row">
            <label htmlFor="projectName" className="col-sm-2 col-form-label">
              Project
            </label>
            <div className="col-sm-10">
              <select
                className="form-control col-sm-6"
                name="projectId"
                onChange={this.handleChange}
                defaultValue={this.state.projectId}
              >
                {this.props.projects.map(p => {
                  return (
                    <option
                      key={p.id}
                      value={p.id}
                      onChange={this.props.handleChange}
                    >
                      {p.name}
                    </option>
                  )
                })}
              </select>
            </div>
          </div>
          <div className="form-group row">
            <label htmlFor="completed" className="col-sm-2 col-form-label">
              completed
            </label>
            <div className="col-sm-10">
              <button
                type="button"
                className={`form-control btn ${
                  this.state.completed
                    ? 'btn-outline-secondary'
                    : 'btn-outline-success'
                }`}
                name="completed"
                value={this.state.completed}
                onClick={() =>
                  this.setState({ completed: !this.state.completed })
                }
              >
                {this.state.completed ? 'Mark Incomplete' : 'Mark Complete'}
              </button>
            </div>
          </div>

          <div className="form-group row">
            <label htmlFor="createdAt" className="col-sm-2 col-form-label">
              CreatedAt
            </label>
            <div className="col-sm-10">
              <input
                className="form-control"
                name="createdAt"
                value={this.state.createdAt}
                readOnly
              />
            </div>
          </div>

          <div className="form-group row">
            <div className="col-sm-10">
              <button
                type="submit"
                className="btn btn-primary"
                onClick={e => this.props.updateTask(e, this.state)}
              >
                Save
              </button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}
export default UpdateTask