import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './Li.css';

class Li extends React.Component {

  setMark = () => (
    this.props.isDone ? 'marked' : 'unMarked'
  )
  render(){
    const {changeMark, id, isDone, at, todo, close} = this.props
    return (
      <div>
        <li className={this.setMark()}>
          <div className="form-check">
            <label className="form-check-label">
              <input className={this.setMark()}  type="checkbox" onChange={changeMark.bind(this, id)} checked={isDone} />
                {todo} At {at}
                <i className="input-helper"></i>
              </label>
            </div>
        </li>
        <i className="material-icons dp48" onClick={close.bind(this, id)}>close</i>
      </div>
    )
  }

}


export default Li