'use strict';

// tag::vars[]
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
// end::vars[]

// tag::app[]
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {books: []};
    }

    componentDidMount() {
        client({method: 'GET', path: 'api'}).done(response => {
            console.info("componentDidMount response: %o", response);
            this.setState({books: response.entity});
        });
    }

    handleDeleteElement = id => {
        console.log("id:", id);
        // "id: 1", but http://localhost:8080/main/book/[object%20Object]/delete
        client({method: 'POST', path: 'http://localhost:8080/main/book/1/delete'}).done(response => {
            client({method: 'GET', path: 'api'}).done(response => {
                console.info("handleDeleteElement response: %o", response);
                this.setState({books: response.entity});
            });
        });
    };

    render() {
        return (
            <BookList books={this.state.books}/>
        )
    }
}
// end::app[]

// tag::book-list[]
class BookList extends React.Component{
    render() {
        var books = this.props.books.map(book =>
            <Book key={book.id} book={book}/>
        );
        return (
            <table id="example" className="display nowrap" style={{width: '100%'}}>
                <tbody>
                    <tr>
                        <th>Название</th>
                        <th>Автор</th>
                        <th>Издательство</th>
                        <th>Год издания</th>
                    </tr>
                    {books}
                </tbody>
            </table>
        )
    }
}
// end::book-list[]

// tag::book[]
class Book extends React.Component{
    render() {
        const { id, name, author, publishing_house, the_year_of_publishing } = this.props.book;

        return (
            <tr>
                <td><a href={"http://localhost:8080/main/book/book?id=" + id}>{name}</a></td>
                <td onClick={() => { App.handleDeleteElement(id) }}>{author}</td>
                <td>{publishing_house}</td>
                <td>{the_year_of_publishing}</td>
            </tr>
        )
    }
}
// end::book[]

// tag::render[]
ReactDOM.render(
    <App />,
    document.getElementById('react')
)
// end::render[]