var InventoryReportBox = React.createClass({
    getInitialState: function () {
        return { data: [] };
    },

    loadInventoryReportFromServer: function () {
        $.ajax({
            url: '/getinventoryreport',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    componentDidMount: function () {
        this.loadInventoryReportFromServer();
    },

    render: function () {
        return (
            <div>
                <h1>Inventory Report</h1>
                <table>
                    <thead>
                        <tr>
                            <th>Inventory ID</th>
                            <th>Menu Item ID</th>
                            <th>Menu Item Name</th>
                            <th>Quantity Available</th>
                        </tr>
                    </thead>
                    <InventoryReportList data={this.state.data} />
                </table>
            </div>
        );
    }
});

var InventoryReportList = React.createClass({
    render: function () {
        var inventoryreportNodes = this.props.data.map(function (item) {
            return (
                <InventoryReport
                    key={item.dbInventoryId}
                    inventoryid={item.dbInventoryId}
                    menuitemid={item.dbMenuItemId}
                    menuname={item.dbMenuName}
                    quantityavailable={item.dbQuantityAvailable}
                >
                </InventoryReport>
            );
        });

        return (
            <tbody>
                {inventoryreportNodes}
            </tbody>
        );
    }
});

var InventoryReport = React.createClass({
    render: function () {
        return (
            <tr>
                <td>{this.props.inventoryid}</td>
                <td>{this.props.menuitemid}</td>
                <td>{this.props.menuname}</td>
                <td>{this.props.quantityavailable}</td>
            </tr>
        );
    }
});

ReactDOM.render(
    <InventoryReportBox />,
    document.getElementById('content')
);