import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios/dist/axios';

class Info extends React.Component {
    render() {
        return (
            <div>
                <h1>Manage Posts with React!</h1>
                <p>Click The title of the post to edit it.</p>
            </div>
        );
    }
}

class Post extends React.Component {



    render() {

        return (
            <div className="post">
                <div className="delete-button">
                <button onClick={() => this.props.deletePost(this.props.id) }>Delete</button>
                </div>
                <h3 value="edit" onClick={() => this.props.editPost(this.props.id) }>{ this.props.title }</h3>
                <p>Phasellus posuere ultricies vestibulum. Ut pellentesque eros dictum sem lacinia gravida. Aliquam tempor mauris ac est ornare, at suscipit ante suscipit. Aenean ligula est, tristique vel neque non, pharetra congue mauris. Integer vulputate vel dolor sit amet pretium. Nunc quis imperdiet neque.</p>

            </div>
        );
    }
}


class App extends React.Component {
    constructor() {
        super();
        this.state = {
         posts: [],
         editing: {},
         action: null,
        };
      }

      handleClick(i) {
        var target = this.state.posts[i];+
            console.log('target');
        this.setState({
            editing: target,
            action: action
        });

        console.log(this);
      }

      editPost(i) {
        console.log('edit' + i);
      }

      deletePost(i) {
        console.log('delete' + i);
      }
    componentDidMount() {
        var _this = this;
            this.serverRequest =
              axios
                .get("/wp-json/wp/v2/posts")
                .then(function(result) {
                    console.log(result);
                  _this.setState({
                    posts: result.data
                  });

                })
    }
    componentWillUnmount() {

    }

    renderPost(i) {
        console.log(i);
        const post = this.state.posts[i];

        return (
            <Post
                title={post.title.rendered}
                onClick={() => this.props.onClick(i)}
                deletePost={this.deletePost(i)}
                editPost={this.editPost(i)}
             />

        );
    }

    render() {

        return (
            <div>
                {this.state.posts.map((item, index) => (
                    <div>
                        {this.renderPost(index)}
                    </div>
                ))}
            </div>
        );
    }

}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);