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

    loadInventoryFromServer: function () {
        $.ajax({
            url: '/getinventory',
            data: {
                'inventoryid': inventoryid.value,
                'menuitemid': menuitemid.value,
                'quantityavailable': quantityavailable.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)
        });
    },

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

    deleteSingleInventoryFromServer: function (inventory) {
        $.ajax({
            url: '/deletesingleinventory',
            dataType: 'json',
            data: inventory,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadInventoryFromServer();

                upinvkey.value = "";
                upinvid.value = "";
                upmenuitemid.value = "";
                upquantityavailable.value = "";
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    updateSingleInventoryFromServer: function (inventory) {
        $.ajax({
            url: '/updatesingleinventory',
            dataType: 'json',
            data: inventory,
            type: 'POST',
            cache: false,
            success: function (upsingledata) {
                this.setState({ upsingledata: upsingledata });
                this.loadInventoryFromServer();
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

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

    render: function () {
        return (
            <div>
                <h1>Update Inventory</h1>
                <Inventoryform2 menudata={this.state.menudata} onInventorySubmit={this.loadInventoryFromServer} />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Inventory ID</th>
                                    <th>Menu Item ID</th>
                                    <th>Quantity Available</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <InventoryList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleInventoryFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <InventoryUpdateform
                            menudata={this.state.menudata}
                            onUpdateSubmit={this.updateSingleInventoryFromServer}
                        />
                    </div>
                </div>
            </div>
        );
    }
});

var Inventoryform2 = React.createClass({
    getInitialState: function () {
        return {
            inventoryid: "",
            menuitemid: "",
            quantityavailable: ""
        };
    },

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

        var inventoryid = this.state.inventoryid.trim();
        var menuitemid = this.state.menuitemid;
        var quantityavailable = this.state.quantityavailable.trim();

        this.props.onInventorySubmit({
            inventoryid: inventoryid,
            menuitemid: menuitemid,
            quantityavailable: quantityavailable
        });
    },

    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>Inventory ID</th>
                                    <td>
                                        <input
                                            type="text"
                                            name="inventoryid"
                                            id="inventoryid"
                                            value={this.state.inventoryid}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Menu Item ID</th>
                                    <td>
                                        <InventoryMenuList
                                            data={this.props.menudata}
                                            selectedValue={this.state.menuitemid}
                                            onSelectChange={this.handleChange}
                                            selectId="menuitemid"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Quantity Available</th>
                                    <td>
                                        <input
                                            name="quantityavailable"
                                            id="quantityavailable"
                                            value={this.state.quantityavailable}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="submit" value="Search Inventory" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

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

        var theupinventorykey = upinvkey.value;
        var theupinventoryid = upinvid.value;
        var theupmenuitemid = upmenuitemid.value;
        var theupquantityavailable = upquantityavailable.value;

        this.props.onUpdateSubmit({
            upinventorykey: theupinventorykey,
            upinventoryid: theupinventoryid,
            upmenuitemid: theupmenuitemid,
            upquantityavailable: theupquantityavailable
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Inventory ID</th>
                                    <td>
                                        <input type="text" name="upinvid" id="upinvid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Menu Item ID</th>
                                    <td>
                                        <InventoryMenuList
                                            data={this.props.menudata}
                                            selectId="upmenuitemid"
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Quantity Available</th>
                                    <td>
                                        <input name="upquantityavailable" id="upquantityavailable" />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="hidden" name="upinvkey" id="upinvkey" />
                        <input type="submit" value="Update Inventory" />
                    </form>
                </div>
            </div>
        );
    }
});

var InventoryMenuList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (menuitem) {
            return (
                <option key={menuitem.dbMenuItemId} value={menuitem.dbMenuItemId}>
                    {menuitem.dbMenuName}
                </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 InventoryList = React.createClass({
    render: function () {
        var inventoryNodes = this.props.data.map(function (inventory) {
            return (
                <Inventory
                    key={inventory.dbInventoryId}
                    invkey={inventory.dbInventoryId}
                    invid={inventory.dbInventoryId}
                    menuid={inventory.dbMenuItemId}
                    qtyavail={inventory.dbQuantityAvailable}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </Inventory>
            );
        }.bind(this));

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

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

    updateRecord: function (e) {
        e.preventDefault();
        var theupinvkey = this.props.invkey;
        this.loadSingleInventory(theupinvkey);
    },

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

        var theupinvkey = this.props.invkey;

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

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

    loadSingleInventory: function (theupinvkey) {
        $.ajax({
            url: '/getsingleinventory',
            data: {
                'upinventoryid': theupinvkey
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                data.map(function (inventory) {
                    upinvkey.value = theupinvkey;
                    upinvid.value = inventory.dbInventoryId;
                    upmenuitemid.value = inventory.dbMenuItemId;
                    upquantityavailable.value = inventory.dbQuantityAvailable;
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.invkey}</td>
                <td>{this.props.invid}</td>
                <td>{this.props.menuid}</td>
                <td>{this.props.qtyavail}</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(
    <InventoryBox />,
    document.getElementById('content')
);