var OrderDetailsBox = React.createClass({
    getInitialState: function () {
        return { data: [],
                 orders: [],
                 menuitems: [] };
    },
    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)
        });

    },
    loadOrders: function () {
        $.ajax({
            url: '/getorders',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ orders: 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({ menuitems: 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();
       // setInterval(this.loadOrderDetailsFromServer, this.props.pollInterval);
    },

    render: function () {
        return (
            <div>
                <h1>Order Details</h1>
                <OrderDetailsform2 onOrderDetailsSubmit={this.loadOrderDetailsFromServer} orders={this.state.orders} menuitems={this.state.menuitems} />
                <br />
                <table>
                        <thead>
                            <tr>
                                <th>Order Details ID</th>
                                <th>Order ID</th>
                                <th>Menu Item ID</th>
                                <th>Quantity</th>
                            </tr>
                         </thead>
                        <OrderDetailsList data={this.state.data} />
                    </table>
                
            </div>
        );
    }
});

var OrderDetailsform2 = React.createClass({
    getInitialState: function () {
        return {
            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 (
            <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.orders} /></td>
                        </tr>
                        <tr>
                            <th>Menu Item</th>
                            <td><MenuItemSelectList data = {this.props.menuitems} /></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>
        );
    }
});

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

var OrderDetails = React.createClass({

    render: function () {

        return (

            <tr>
                            <td>
                                {this.props.orderdetailsid} 
                            </td>
                            <td>
                                {this.props.orderid}
                            </td>
                            <td>
                                {this.props.menuitemid}
                            </td>
                            <td>
                                {this.props.orderdetailquantity}
                            </td>
                </tr>
        );
    }
});

var OrderSelectList = React.createClass ({
    render: function () {
        var optionNodes = this.props.data.map(function (order) {
            return (
                <option
                    key = {order.dbOrderId}
                    value= {order.dbOrderId}
                >
                    {order.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 (item) {
            return (
                <option
                    key = {item.dbMenuItemId}
                    value= {item.dbMenuItemId}
                >
                    {item.dbMenuName}        
                </option>
            );
        });
        return (
            <select name = "menuitemid" id = "menuitemid">
                <option value =""></option>
                {optionNodes}
            </select>
        );
    }
});

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