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

class Li extends React.Component {
  constructor(props){
    super(props)
    console.log(this.props);
    this.markedFlag = false;
    this.state = {
      cssClass: 'unMarked'
    }
  }

  render(){
    return (
      <div>
        <li className={this.state.cssClass}>
          <div className="form-check">
            <label className="form-check-label">
              <input className="checkbox"  type="checkbox" onClick={this.mark} />
                {this.props.todo} At {this.props.at}
                <i className="input-helper"></i>
              </label>
            </div>
        </li>
      </div>
    )
  }
  mark = () => {
    if (this.markedFlag) {
      this.markedFlag = false;
      this.setState({cssClass:'unmarked'})
    }else{
      this.markedFlag = true;
      this.setState({cssClass:'marked'})
    }
  }
}


export default Li