import { Component } from "react";
import TodoItem from "./TodoItem";

class Todo extends Component {
  state = {
    todos: [
      { id: 1, text: "Test", isSuccess: false },
      { id: 2, text: "Test 2", isSuccess: false }
    ],
    todosText: null
  };

  handlerAdd() {
    this.state.todos.push({
      id: 5,
      text: this.state.todosText,
      isSuccess: false
    });

    this.setState(this.state);
  }

  handlerSucess(index) {
	// Это работает, но как я понял, так делать не стоит, поэтому нужен другой способ изменить state.

    this.state.todos[index].isSuccess = true;
    this.setState(this.state);

    console.log(this.state);
  }

  render() {
    return (
      <div>
        <h1>Добавьте новую задачу</h1>
        <input
          type="text"
          onInput={(event) => this.setState({ todosText: event.target.value })}
        />
        <button onClick={this.handlerAdd.bind(this)}>Add Todo</button>
        <hr />
        <TodoItem
          state={this.state.todos}
          onSuccess={this.handlerSucess.bind(this)}
        />
      </div>
    );
  }
}

export default Todo;