import React, { Component } from 'react';
import { observer } from 'mobx-react';
import DevTools from 'mobx-react-devtools';

@observer
export default class App extends Component {
  state = {
    value: '',
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.props);
    const { appState: { posts: { addPost } } } = this.props;
    addPost({ title: this.state.value });
    this.input.value = '';
  };

  onChange = ({ target: { value } }) => this.setState({ value });

  input = null;

  renderPosts() {
    const { appState: { posts: { posts } } } = this.props;
    return posts.map(({ body, title }) => (
      <div>
        <h1>{title}</h1>
        <p>{body}</p>
      </div>
    ))
  }

  render() {
    const { appState: { posts: { posts } } } = this.props;
    return (
      <div>
        <h1>Hello</h1>
        <div>You have {posts.length} posts</div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            onChange={this.onChange}
            ref={e => { this.input = e; }}
          />
        </form>
        {this.renderPosts()}
        <DevTools />
      </div>
    );
  }
}