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

    loadMenuItemsFromServer: function () {
        $.ajax({
            url: '/getmenuitems',
            data: {
                'menuitemid': menuitemid.value,
                'menuname': menuname.value,
                'menudescription': menudescription.value,
                'menuprice': menuprice.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)
        });
    },

    deleteSingleMenuItemFromServer: function (menuitem) {
        $.ajax({
            url: '/deletesinglemenuitem',
            dataType: 'json',
            data: menuitem,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadMenuItemsFromServer();

                upmenukey.value = "";
                upmenuid.value = "";
                upmenuname.value = "";
                upmenudescription.value = "";
                upmenuprice.value = "";
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

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

    componentDidMount: function () {
        this.loadMenuItemsFromServer();
    },

    render: function () {
        return (
            <div>
                <h1>Update Menu Items</h1>
                <MenuItemform2 onMenuItemSubmit={this.loadMenuItemsFromServer} />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Menu Item ID</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Price</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <MenuItemList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleMenuItemFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <MenuItemUpdateform onUpdateSubmit={this.updateSingleMenuItemFromServer} />
                    </div>
                </div>
            </div>
        );
    }
});

var MenuItemform2 = React.createClass({
    getInitialState: function () {
        return {
            menuitemkey: "",
            menuitemid: "",
            menuname: "",
            menudescription: "",
            menuprice: ""
        };
    },

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

        var menuitemid = this.state.menuitemid.trim();
        var menuname = this.state.menuname.trim();
        var menudescription = this.state.menudescription.trim();
        var menuprice = this.state.menuprice.trim();

        this.props.onMenuItemSubmit({
            menuitemid: menuitemid,
            menuname: menuname,
            menudescription: menudescription,
            menuprice: menuprice
        });
    },

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

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleSubmit}>
                        <h2>Menu Items</h2>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Menu Item ID</th>
                                    <td>
                                        <input type="text" name="menuitemid" id="menuitemid" value={this.state.menuitemid} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Name</th>
                                    <td>
                                        <input name="menuname" id="menuname" value={this.state.menuname} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Description</th>
                                    <td>
                                        <input name="menudescription" id="menudescription" value={this.state.menudescription} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Price</th>
                                    <td>
                                        <input name="menuprice" id="menuprice" value={this.state.menuprice} onChange={this.handleChange} />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <input type="submit" value="Search Menu Item" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

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

        var theupmenuitemkey = upmenukey.value;
        var theupmenuitemid = upmenuid.value;
        var theupmenuname = upmenuname.value;
        var theupmenudescription = upmenudescription.value;
        var theupmenuprice = upmenuprice.value;

        this.props.onUpdateSubmit({
            upmenuitemkey: theupmenuitemkey,
            upmenuitemid: theupmenuitemid,
            upmenuname: theupmenuname,
            upmenudescription: theupmenudescription,
            upmenuprice: theupmenuprice
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Menu Item ID</th>
                                    <td>
                                        <input type="text" name="upmenuid" id="upmenuid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Name</th>
                                    <td>
                                        <input name="upmenuname" id="upmenuname" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Description</th>
                                    <td>
                                        <input name="upmenudescription" id="upmenudescription" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Price</th>
                                    <td>
                                        <input name="upmenuprice" id="upmenuprice" />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="hidden" name="upmenukey" id="upmenukey" />
                        <input type="submit" value="Update Menu Item" />
                    </form>
                </div>
            </div>
        );
    }
});

var MenuItemList = React.createClass({
    render: function () {
        var menuitemNodes = this.props.data.map(function (menuitem) {
            return (
                <MenuItem
                    key={menuitem.dbMenuItemId}
                    menukey={menuitem.dbMenuItemId}
                    menuid={menuitem.dbMenuItemId}
                    menuname={menuitem.dbMenuName}
                    menudescription={menuitem.dbMenuDescription}
                    menuprice={menuitem.dbMenuPrice}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </MenuItem>
            );
        }.bind(this));

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

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

    updateRecord: function (e) {
        e.preventDefault();
        var theupmenukey = this.props.menukey;
        this.loadSingleMenuItem(theupmenukey);
    },

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

        var theupmenukey = this.props.menukey;

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

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

    loadSingleMenuItem: function (theupmenukey) {
        $.ajax({
            url: '/getsinglemenuitem',
            data: {
                'upmenuitemid': theupmenukey
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                console.log(data);
                data.map(function (menuitem) {
                    upmenukey.value = theupmenukey;
                    upmenuid.value = menuitem.dbMenuItemId;
                    upmenuname.value = menuitem.dbMenuName;
                    upmenudescription.value = menuitem.dbMenuDescription;
                    upmenuprice.value = menuitem.dbMenuPrice;
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.menukey}</td>
                <td>{this.props.menuid}</td>
                <td>{this.props.menuname}</td>
                <td>{this.props.menudescription}</td>
                <td>{this.props.menuprice}</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(
    <MenuItemBox />,
    document.getElementById('content')
);