import React, { Component } from 'react';
import { observer } from "mobx-react";
import './App.css';

@observer
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { task: "" };
  }

  handleChange = (event) => {
    this.setState({ task: event.target.value });
  }

  addTodo = () => {
    this.props.todoStore.addTodo(this.state.task);
    this.setState({ task: "" });
  }

  render() {
    const items = this.props.todoStore.todos.map((todo, i) => {
      return (
        <li key={ i }>
          <input
            type='checkbox'
            checked={ todo.completed }
            disabled='disabled' />
          { todo.task }
        </li>
      );
    });
    return (
      <div className="App">
        <div>
          <h1>Todo Report</h1>
          <p>{ this.props.todoStore.report }</p>
        </div>
        <div>
          <h1>Todo Form</h1>
          <input
            type="text"
            value={ this.state.task }
            onChange={ this.handleChange } />
          <input
            type="button"
            value="add"
            onClick={ this.addTodo } />
        </div>
        <div>
          <h1>Todo List</h1>
          <ul style={{ listStyleType: "none" }} >{ items }</ul>
        </div>
      </div>
    );
  }
}

export default App;