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

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

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

    render: function () {
        return (
            <div>
                <h1>Past Orders</h1>
                <table>
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Customer ID</th>
                            <th>Order Date</th>
                            <th>Order Type</th>
                            <th>Order Status</th>
                        </tr>
                    </thead>
                    <PastOrderList data={this.state.data} />
                </table>
            </div>
        );
    }
});

var PastOrderList = React.createClass({
    render: function () {
        var orderNodes = this.props.data.map(function (order) {
            return (
                <PastOrder
                    key={order.dbOrderId}
                    orderid={order.dbOrderId}
                    customerid={order.dbCustomerId}
                    orderdate={order.dbOrderDate}
                    ordertype={order.dbOrderType}
                    orderstatus={order.dbOrderStatus}
                />
            );
        });

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

var PastOrder = React.createClass({
    render: function () {
        return (
            <tr>
                <td>{this.props.orderid}</td>
                <td>{this.props.customerid}</td>
                <td>{this.props.orderdate}</td>
                <td>{this.props.ordertype}</td>
                <td>{this.props.orderstatus}</td>
            </tr>
        );
    }
});

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