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

    loadOrdersFromServer: function () {
        $.ajax({
            url: '/getorders',
            data: {
                'orderid': orderid.value,
                'customerid': customerid.value,
                'orderdate': orderdate.value,
                'ordertype': ordertype.value,
                'orderstatus': orderstatus.value
            },
            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)
        });
    },

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

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

    render: function () {
        return (
            <div>
                <h1>Orders</h1>
                <Orderform2 customerdata={this.state.customerdata} onOrderSubmit={this.loadOrdersFromServer} />
                <br />
                <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>
                    <OrderList data={this.state.data} />
                </table>
            </div>
        );
    }
});

var Orderform2 = React.createClass({
    getInitialState: function () {
        return {
            orderid: "",
            customerid: "",
            orderdate: "",
            ordertype: "",
            orderstatus: ""
        };
    },

    handleSubmit: function (e) {
        e.preventDefault();

        var orderid = this.state.orderid.trim();
        var customerid = this.state.customerid;
        var orderdate = this.state.orderdate.trim();
        var ordertype = this.state.ordertype.trim();
        var orderstatus = this.state.orderstatus.trim();

        this.props.onOrderSubmit({
            orderid: orderid,
            customerid: customerid,
            orderdate: orderdate,
            ordertype: ordertype,
            orderstatus: orderstatus
        });
    },

    handleChange: function (event) {
        this.setState({
            [event.target.id]: event.target.value
        });
    },

    render: function () {
        return (
            <form onSubmit={this.handleSubmit}>
                <h2>Orders</h2>
                <table>
                    <tbody>
                        <tr>
                            <th>Order ID</th>
                            <td>
                                <input type="text" name="orderid" id="orderid" value={this.state.orderid} onChange={this.handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>Customer ID</th>
                            <td>
                                <CustomerList data={this.props.customerdata} selectedValue={this.state.customerid} onSelectChange={this.handleChange} selectId="customerid" />
                            </td>
                        </tr>
                        <tr>
                            <th>Order Date</th>
                            <td>
                                <input type="text" name="orderdate" id="orderdate" value={this.state.orderdate} onChange={this.handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>Order Type</th>
                            <td>
                                <input type="text" name="ordertype" id="ordertype" value={this.state.ordertype} onChange={this.handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>Order Status</th>
                            <td>
                                <input type="text" name="orderstatus" id="orderstatus" value={this.state.orderstatus} onChange={this.handleChange} />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="submit" value="Search Orders" />
            </form>
        );
    }
});

var CustomerList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (customer) {
            return (
                <option key={customer.dbCustomerId} value={customer.dbCustomerId}>
                    {customer.dbCustomerName}
                </option>
            );
        });

        return (
            <select name={this.props.selectId} id={this.props.selectId} value={this.props.selectedValue} onChange={this.props.onSelectChange}>
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

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

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

var Order = 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(
    <OrderBox />,
    document.getElementById('content')
);