// Task component: represents a single todo item.

Task = React.createClass({
  propTypes: {
    // This component gets the task to display through a React prop.
    // We can use propTypes to indicate it is required.
    task: React.PropTypes.object.isRequired
  },

  toggleChecked() {
    // Set the checked property to the opposite of its current value.
    Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
  },

  deleteThisTask() {
    Meteor.call("removeTask", this.props.task._id);
  },

  render() {
    // Give tasks a different clasSName when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    let result = (
      <li className={taskClassName}>
        <button className="delete" onClick={this.deleteThisTask}>
          &times;
          </button>

        <input
          type="checkbox"
          readOnly="{true}"
          checked={this.props.task.checked}
          onClick={this.toggleChecked}
        />

        <strong>{this.props.task.username}</strong>: <span className="text">{this.props.task.text}</span>
      </li>
    );
    return result;
  }
});