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

    },
    componentDidMount: function () {
        this.loadMenuItemsFromServer();
       // setInterval(this.loadMenuItemsFromServer, this.props.pollInterval);
    },

    render: function () {
        return (
            <div>
                <h1>Menu Items</h1>
                <MenuItemform2 onMenuItemSubmit={this.loadMenuItemsFromServer} />
                <br />
                <table>
                        <thead>
                            <tr>
                                <th>Menu Item ID</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Price</th>
                            </tr>
                         </thead>
                        <MenuItemList data={this.state.data} />
                    </table>
                
            </div>
        );
    }
});

var MenuItemform2 = React.createClass({
    getInitialState: function () {
        return {
            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 (
            <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>
        );
    }
});

var MenuItemList = React.createClass({
    render: function () {
        var menuItemNodes = this.props.data.map(function (item) {
            return (
                <MenuItem
                    key={item.dbMenuItemId}
                    menuitemid={item.dbMenuItemId}
                    menuname={item.dbMenuName}
                    menudescription={item.dbMenuDescription}
                    menuprice={item.dbMenuPrice}
                >
                </MenuItem>
            );
                       
        });
        
        return (
             <tbody>
                {menuItemNodes}
            </tbody>
        );
    }
});

var MenuItem = React.createClass({

    render: function () {

        return (

            <tr>
                            <td>
                                {this.props.menuitemid} 
                            </td>
                            <td>
                                {this.props.menuname}
                            </td>
                            <td>
                                {this.props.menudescription}
                            </td>
                            <td>
                                {this.props.menuprice}
                            </td>
                </tr>
        );
    }
});

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