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

    loadOrderDetailsFromServer: function () {
        $.ajax({
            url: '/getorderdetails',
            data: {
                'orderdetailsid': orderdetailsid.value,
                'orderid': orderid.value,
                'menuitemid': menuitemid.value,
                'orderdetailquantity': orderdetailquantity.value
            },
            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)
        });
    },

    deleteSingleOrderDetailsFromServer: function (orderdetails) {
        $.ajax({
            url: '/deletesingleorderdetail',
            dataType: 'json',
            data: orderdetails,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadOrderDetailsFromServer();

                uporderdetailskey.value = "";
                uporderdetailsid.value = "";
                uporderid.value = "";
                upmenuitemid.value = "";
                uporderdetailquantity.value = "";
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    updateSingleOrderDetailsFromServer: function (orderdetails) {
        $.ajax({
            url: '/updatesingleorderdetail',
            dataType: 'json',
            data: orderdetails,
            type: 'POST',
            cache: false,
            success: function (upsingledata) {
                this.setState({ upsingledata: upsingledata });
                this.loadOrderDetailsFromServer();
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

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

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

    componentDidMount: function () {
        this.loadOrderDetailsFromServer();
        this.loadOrders();
        this.loadMenuItems();
    },

    render: function () {
        return (
            <div>
                <h1>Update Order Details</h1>
                <OrderDetailsform2
                    onOrderDetailsSubmit={this.loadOrderDetailsFromServer}
                    data={this.state.orderdata}
                    data2={this.state.menuitemdata}
                />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Order Details ID</th>
                                    <th>Order ID</th>
                                    <th>Menu Item ID</th>
                                    <th>Quantity</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <OrderDetailsList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleOrderDetailsFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <OrderDetailsUpdateform
                            onUpdateSubmit={this.updateSingleOrderDetailsFromServer}
                            data={this.state.orderdata}
                            data2={this.state.menuitemdata}
                        />
                    </div>
                </div>
            </div>
        );
    }
});

var OrderDetailsform2 = React.createClass({
    getInitialState: function () {
        return {
            orderdetailskey: "",
            orderdetailsid: "",
            orderdetailquantity: ""
        };
    },

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

        var orderdetailsid = this.state.orderdetailsid.trim();
        var theorderid = orderid.value;
        var themenuitemid = menuitemid.value;
        var orderdetailquantity = this.state.orderdetailquantity.trim();

        this.props.onOrderDetailsSubmit({
            orderdetailsid: orderdetailsid,
            orderid: theorderid,
            menuitemid: themenuitemid,
            orderdetailquantity: orderdetailquantity
        });
    },

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

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleSubmit}>
                        <h2>Order Details</h2>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Order Details ID</th>
                                    <td>
                                        <input
                                            type="text"
                                            name="orderdetailsid"
                                            id="orderdetailsid"
                                            value={this.state.orderdetailsid}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Order</th>
                                    <td><OrderSelectList data={this.props.data} /></td>
                                </tr>
                                <tr>
                                    <th>Menu Item</th>
                                    <td><MenuItemSelectList data={this.props.data2} /></td>
                                </tr>
                                <tr>
                                    <th>Quantity</th>
                                    <td>
                                        <input
                                            name="orderdetailquantity"
                                            id="orderdetailquantity"
                                            value={this.state.orderdetailquantity}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <input type="submit" value="Search Order Details" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

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

        var theuporderdetailskey = uporderdetailskey.value;
        var theuporderdetailsid = uporderdetailsid.value;
        var theuporderid = uporderid.value;
        var theupmenuitemid = upmenuitemid.value;
        var theuporderdetailquantity = uporderdetailquantity.value;

        this.props.onUpdateSubmit({
            uporderdetailskey: theuporderdetailskey,
            uporderdetailsid: theuporderdetailsid,
            uporderid: theuporderid,
            upmenuitemid: theupmenuitemid,
            uporderdetailquantity: theuporderdetailquantity
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Order Details ID</th>
                                    <td>
                                        <input type="text" name="uporderdetailsid" id="uporderdetailsid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Order</th>
                                    <td><OrderUpdateSelectList data={this.props.data} /></td>
                                </tr>
                                <tr>
                                    <th>Menu Item</th>
                                    <td><MenuItemUpdateSelectList data={this.props.data2} /></td>
                                </tr>
                                <tr>
                                    <th>Quantity</th>
                                    <td>
                                        <input name="uporderdetailquantity" id="uporderdetailquantity" />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="hidden" name="uporderdetailskey" id="uporderdetailskey" />
                        <input type="submit" value="Update Order Details" />
                    </form>
                </div>
            </div>
        );
    }
});

var OrderDetailsList = React.createClass({
    render: function () {
        var orderdetailsNodes = this.props.data.map(function (orderdetails) {
            return (
                <OrderDetails
                    key={orderdetails.dbOrderDetailsId}
                    orderdetailskey={orderdetails.dbOrderDetailsId}
                    orderdetailsid={orderdetails.dbOrderDetailsId}
                    orderid={orderdetails.dbOrderId}
                    menuitemid={orderdetails.dbMenuItemId}
                    orderdetailquantity={orderdetails.dbOrderDetailQuantity}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </OrderDetails>
            );
        }.bind(this));

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

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

    updateRecord: function (e) {
        e.preventDefault();
        var theuporderdetailskey = this.props.orderdetailskey;
        this.loadSingleOrderDetails(theuporderdetailskey);
    },

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

        var theuporderdetailskey = this.props.orderdetailskey;

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

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

    loadSingleOrderDetails: function (theuporderdetailskey) {
        $.ajax({
            url: '/getsingleorderdetail',
            data: {
                'uporderdetailsid': theuporderdetailskey
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                console.log(data);
                data.map(function (orderdetails) {
                    uporderdetailskey.value = theuporderdetailskey;
                    uporderdetailsid.value = orderdetails.dbOrderDetailsId;
                    uporderid.value = orderdetails.dbOrderId;
                    upmenuitemid.value = orderdetails.dbMenuItemId;
                    uporderdetailquantity.value = orderdetails.dbOrderDetailQuantity;
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.orderdetailskey}</td>
                <td>{this.props.orderdetailsid}</td>
                <td>{this.props.orderid}</td>
                <td>{this.props.menuitemid}</td>
                <td>{this.props.orderdetailquantity}</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>
        );
    }
});

var OrderSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (orders) {
            return (
                <option
                    key={orders.dbOrderId}
                    value={orders.dbOrderId}
                >
                    {orders.dbOrderId}
                </option>
            );
        });

        return (
            <select name="orderid" id="orderid">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

var MenuItemSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (menuitems) {
            return (
                <option
                    key={menuitems.dbMenuItemId}
                    value={menuitems.dbMenuItemId}
                >
                    {menuitems.dbMenuName}
                </option>
            );
        });

        return (
            <select name="menuitemid" id="menuitemid">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

var OrderUpdateSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (orders) {
            return (
                <option
                    key={orders.dbOrderId}
                    value={orders.dbOrderId}
                >
                    {orders.dbOrderId}
                </option>
            );
        });

        return (
            <select name="uporderid" id="uporderid">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

var MenuItemUpdateSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (menuitems) {
            return (
                <option
                    key={menuitems.dbMenuItemId}
                    value={menuitems.dbMenuItemId}
                >
                    {menuitems.dbMenuName}
                </option>
            );
        });

        return (
            <select name="upmenuitemid" id="upmenuitemid">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

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