import React from 'react';
import {render} from 'react-dom';
import InvoicePickTable from './invoice-pick-table.jsx';
import InvoiceSelectedTable from './invoice-selected-table.jsx';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            invoices:[],
            selectedInvoices:[]
        };
        this.selected = {};
    }

    getInvoiceData(){
        return new Promise(function(resolve, reject) {
            console.log("hi");
            resolve([{number: "1"},{number: "2"},{number: "3"}]);
        })

    }
    componentDidMount() {
        const self = this;
        self.getInvoiceData()
            .then((response) => {
                self.state.invoices = response;
                console.log(self.state);
            })
            .catch((err) => {
                console.error(err);
            })
    }
    render () {
        return (
            <div>
                <p>Selected:
                    {
                        function() {return JSON.parse(this.selected)}
                    }
                </p>
                <InvoicePickTable invoices = {this.state.invoices} selected = {this.selected} />
                <button>Move</button>
                <InvoiceSelectedTable selectedInvoices = {this.state.selectedInvoices} />
            </div>

        );
    }
}

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