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




class TodoList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      todoList : [
        {todo: 'Clean the bathroom' , at:'2020'},
        {todo: 'Buy Milk', at:'2019'},
        {todo: 'Walk the dog' , at:'2018'},
      ]
    }
  }

  addToList = () => {
    let todo = document.getElementById('user_input').value;
    if (todo !== '') {
    let tmp_state = this.state.todoList;
      tmp_state.push({todo:todo, at:'This year'})
      this.setState({tmp_state})
    }
  }
  render(){
    return (
          <div className="page-content page-container" id="page-content">
            <div className="padding">
              <div className="row container d-flex justify-content-center">
                  <div className="col-lg-12">
                      <div className="card px-3">
                          <div className="card-body">
                              <h4 className="card-title">Awesome Todo list</h4>
                              <div className="add-items d-flex">
                                <input className="form-control todo-list-input" id="user_input" />
                                  <button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.addToList}>Add</button>
                                 </div>
                              <div className="list-wrapper">
                                  <ul className="d-flex flex-column-reverse todo-list">
                                      {
                                        this.state.todoList.map( (element, index) => (
                                            <Li
                                              key={index}
                                              id={index}
                                              todo={element.todo}
                                              at={element.at}
                                              />
                                        ))
                                    }
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    )
  }
}
export default TodoList