import React from 'react';
import './Todo.css'

class Todo extends React.Component {
  state = {
    todos: [
        { id: 1, text: ' react', done: true },
        { id: 2, text: 'build an react app', done: false },
        { id: 3, text: 'modify', done: true },
        { id: 4, text: 'test', done: false },
    ],
    text: '',
    filter: ''
  };

  onChangeCheck(id) {
    return () => {
      this.setState({
        todos: this.state.todos.map(item => {
          return item.id === id ? { id: item.id, text: item.text, done: !item.done } : item;
        })
      });
    }
  }



clearTodo = () => {
  this.setState({
    todos: this.state.todos.filter(item => !item.done)
  })
}

todoRender() {
  let filtredTodos = this.state.todos.filter(item => {
    return item.text.toLowerCase().search(
      this.state.filter.toLowerCase()) !== -1;
  });
  return filtredTodos.map(item => {
    return (
      <li key={item.id}>
        <input type="checkbox" checked={item.done} onChange={this.onChangeCheck(item.id)} />
        <span className={`done-${item.done}`}> {item.text} </span>
        [<a href="#" onClick={this.deleteTask(item.id)}> Delete me! </a>]
      </li>
    )
  })
}

deleteTask(id) {
  return () => {
    this.setState({
      todos: this.state.todos.filter(item => item.id !== id)
    })
  }
}

addTodo = (e) => {
  e.preventDefault();
  var items = [
    ...this.state.todos,
    {text: this.state.text, id: Date.now(), done: false}
  ];
  var txt = '';
  this.setState({todos: items, text: txt});
}


  render() {
    return (
      <div className="Todo">
        <h2>Todo</h2>
        <div>
          <input type="text" placeholder="filter tasks" onChange={ (e) => {
            this.setState({filter: e.target.value})
          }
          }/>
          <br />
          <span>{this.state.todos.filter(item => !item.done).length} remaining </span>
        </div>
        <ul>
          {this.todoRender()}
        </ul>

        <form onSubmit={this.addTodo}>
          <input type="text" onChange = {(e) => {
            this.setState({text: e.target.value})
          }} />
          <button type="submit">Add</button>
        </form>
        <a href="#" onClick={this.clearTodo}> Clean </a>
      </div>
    );
  }

}

export default Todo;