import React from 'react';
import Li from './Li.js';
import AddTodoForm from './AddtodoForm.js';
import 'bootstrap/dist/css/bootstrap.css';
import dotoJson from  '../server/data/todolist.js';

class TodoList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      todoList : dotoJson,
      nextTodoValue: '',
      isCheckAll: false,
      checkAllToggleName: 'checkAll'
    }
  }


  addToList = () => {
    let todo = this.state.nextTodoValue;
    if (todo !== '') {
    let tmp_state = this.state;
      tmp_state.todoList.push({id: 12900,todo:todo, at:'This year' , isDone: false})
      tmp_state.nextTodoValue = "";
      this.setState({tmp_state})
    }
  }

  changeNextTodoValue = (event) => {
    let newNextTodoValue = event.target.value
    this.setState({
      nextTodoValue : newNextTodoValue
    });
  }

  changeMark = (id) => {
    let tmp_state = this.state.todoList.map((ele) => {
      if(id === ele.id) ele.isDone = !ele.isDone; ;
      return ele
    });
    this.setState({todoList:tmp_state});
  }
  closeMark = (id) => {
    let tmp_state = this.state.todoList.filter((ele, index) => (
          ele.id !== id
    )
  )
  this.setState({todoList:tmp_state})
  }
  checkAllToggle = () => {
      let tmp_state = this.state.todoList.map((element) => {
        element.isDone = !this.state.checkAllToggle
        return (element)
        }
      )
      this.setState({todoList:tmp_state,checkAllToggle:!this.state.checkAllToggle,isCheckAll: !this.state.isCheckAll})
  }

  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>
                                <AddTodoForm
                                  checkAllToggleName={this.state.checkAllToggleName}
                                  checkAllToggle={this.checkAllToggle}
                                  isCheckAll={this.state.isCheckAll}
                                  formValue={this.state.nextTodoValue}
                                  addToList={this.addToList}
                                  changeNextTodoValue={this.changeNextTodoValue}
                                  />
                              <div className="list-wrapper">
                                  <ul className="d-flex flex-column-reverse todo-list">
                                      {
                                        this.state.todoList.map( (element) => (
                                            <Li
                                              close={this.closeMark}
                                              changeMark={this.changeMark}
                                              isDone={element.isDone}
                                              key={element.id}
                                              id={element.id}
                                              todo={element.todo}
                                              at={element.at}
                                              />
                                        ))
                                    }
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    )
  }
}
export default TodoList