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)
        });
    },

    deleteSingleOrderFromServer: function (order) {
        $.ajax({
            url: '/deletesingleorder',
            dataType: 'json',
            data: order,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadOrdersFromServer();

                uporderkey.value = "";
                uporderid.value = "";
                upcustomerid.value = "";
                upordertype.value = "";
                uporderstatus.value = "";
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    updateSingleOrderFromServer: function (order) {
        $.ajax({
            url: '/updatesingleorder',
            dataType: 'json',
            data: order,
            type: 'POST',
            cache: false,
            success: function (upsingledata) {
                this.setState({ upsingledata: upsingledata });
                this.loadOrdersFromServer();
            }.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>Update Orders</h1>
                <Orderform2
                    customerdata={this.state.customerdata}
                    onOrderSubmit={this.loadOrdersFromServer}
                />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Order ID</th>
                                    <th>Customer ID</th>
                                    <th>Order Date</th>
                                    <th>Order Type</th>
                                    <th>Order Status</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <OrderList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleOrderFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <OrderUpdateform
                            customerdata={this.state.customerdata}
                            onUpdateSubmit={this.updateSingleOrderFromServer}
                        />
                    </div>
                </div>
            </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 (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleSubmit}>
                        <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><br />
                        <input type="submit" value="Search Orders" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

var OrderUpdateform = React.createClass({
    handleUpSubmit: function (e) {
        e.preventDefault();

        var theuporderkey = uporderkey.value;
        var theuporderid = uporderid.value;
        var theupcustomerid = upcustomerid.value;
        var theupordertype = upordertype.value;
        var theuporderstatus = uporderstatus.value;

        this.props.onUpdateSubmit({
            uporderkey: theuporderkey,
            uporderid: theuporderid,
            upcustomerid: theupcustomerid,
            upordertype: theupordertype,
            uporderstatus: theuporderstatus
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Order ID</th>
                                    <td>
                                        <input type="text" name="uporderid" id="uporderid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer ID</th>
                                    <td>
                                        <CustomerList
                                            data={this.props.customerdata}
                                            selectId="upcustomerid"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Order Type</th>
                                    <td>
                                        <input name="upordertype" id="upordertype" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Order Status</th>
                                    <td>
                                        <input name="uporderstatus" id="uporderstatus" />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="hidden" name="uporderkey" id="uporderkey" />
                        <input type="submit" value="Update Order" />
                    </form>
                </div>
            </div>
        );
    }
});

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}
                    orderkey={order.dbOrderId}
                    orderid={order.dbOrderId}
                    customerid={order.dbCustomerId}
                    orderdate={order.dbOrderDate}
                    ordertype={order.dbOrderType}
                    orderstatus={order.dbOrderStatus}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </Order>
            );
        }.bind(this));

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

var Order = React.createClass({
    getInitialState: function () {
        return {
            uporderkey: "",
            singledata: []
        };
    },

    updateRecord: function (e) {
        e.preventDefault();
        var theuporderkey = this.props.orderkey;
        this.loadSingleOrder(theuporderkey);
    },

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

        var theuporderkey = this.props.orderkey;

        if (!confirm("Delete this order record?")) {
            return;
        }

        this.props.onDeleteSubmit({
            deleteid: theuporderkey
        });
    },

    loadSingleOrder: function (theuporderkey) {
        $.ajax({
            url: '/getsingleorder/',
            data: {
                'uporderid': theuporderkey
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                data.map(function (order) {
                    uporderkey.value = theuporderkey;
                    uporderid.value = order.dbOrderId;
                    upcustomerid.value = order.dbCustomerId;
                    upordertype.value = order.dbOrderType;
                    uporderstatus.value = order.dbOrderStatus;
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.orderkey}</td>
                <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>
                <td>
                    <form onSubmit={this.updateRecord}>
                        <input type="submit" value="Update Record" />
                    </form>
                </td>
                <td>
                    <form onSubmit={this.deleteRecord}>
                        <input type="submit" value="Delete Record" />
                    </form>
                </td>
            </tr>
        );
    }
});

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