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

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

    render: function () {
        return (
            <div>
                <h1>Inventory</h1>
                <Inventoryform2 menudata={this.state.menudata} onInventorySubmit={this.loadInventoryFromServer} />
                <br />
                <table>
                    <thead>
                        <tr>
                            <th>Inventory ID</th>
                            <th>Menu Item ID</th>
                            <th>Quantity Available</th>
                        </tr>
                    </thead>
                    <InventoryList data={this.state.data} />
                </table>
            </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 (
            <form onSubmit={this.handleSubmit}>
                <h2>Inventory</h2>
                <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>
                <input type="submit" value="Search Inventory" />
            </form>
        );
    }
});

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}
                    inventoryid={inventory.dbInventoryId}
                    menuitemid={inventory.dbMenuItemId}
                    quantityavailable={inventory.dbQuantityAvailable}
                >
                </Inventory>
            );
        });

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

var Inventory = React.createClass({
    render: function () {
        return (
            <tr>
                <td>{this.props.inventoryid}</td>
                <td>{this.props.menuitemid}</td>
                <td>{this.props.quantityavailable}</td>
            </tr>
        );
    }
});

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