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

    loadCustomersFromServer: function () {
        var mailervalue = 2;

        if (custmaileryes.checked) {
            mailervalue = 1;
        }

        if (custmailerno.checked) {
            mailervalue = 0;
        }

        $.ajax({
            url: '/getcustomers',
            data: {
                'customerid': customerid.value,
                'customername': customername.value,
                'customeremail': customeremail.value,
                'customerphone': customerphone.value,
                'customerpw': customerpw.value,
                'customermailer': mailervalue
            },
            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)
        });
    },

    deleteSingleCustomerFromServer: function (customer) {
        $.ajax({
            url: '/deletesinglecustomer',
            dataType: 'json',
            data: customer,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadCustomersFromServer();

                upcustkey.value = "";
                upcustid.value = "";
                upcustname.value = "";
                upcustemail.value = "";
                upcustphone.value = "";
                upcustpw.value = "";
                upcustmaileryes.checked = false;
                upcustmailerno.checked = false;
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    updateSingleCustomerFromServer: function (customer) {
        $.ajax({
            url: '/updatesinglecustomer',
            dataType: 'json',
            data: customer,
            type: 'POST',
            cache: false,
            success: function (upsingledata) {
                this.setState({ upsingledata: upsingledata });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
        window.location.reload(true);
    },

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

    render: function () {
        return (
            <div>
                <h1>Update Customers</h1>
                <Customerform2 onCustomerSubmit={this.loadCustomersFromServer} />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <CustomerList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleCustomerFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <CustomerUpdateform onUpdateSubmit={this.updateSingleCustomerFromServer} />
                    </div>
                </div>
            </div>
        );
    }
});

var Customerform2 = React.createClass({
    getInitialState: function () {
        return {
            customerid: "",
            customername: "",
            customeremail: "",
            customerphone: "",
            customerpw: "",
            selectedOption: ""
        };
    },

    handleOptionChange: function (e) {
        this.setState({
            selectedOption: e.target.value
        });
    },

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

        var customerid = this.state.customerid.trim();
        var customeremail = this.state.customeremail.trim();
        var customername = this.state.customername.trim();
        var customerphone = this.state.customerphone.trim();
        var customerpw = this.state.customerpw.trim();
        var customermailer = this.state.selectedOption;

        this.props.onCustomerSubmit({
            customerid: customerid,
            customername: customername,
            customeremail: customeremail,
            customerphone: customerphone,
            customerpw: customerpw,
            customermailer: customermailer
        });
    },

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

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleSubmit}>
                        <h2>Customers</h2>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Customer ID</th>
                                    <td>
                                        <input type="text" name="customerid" id="customerid" value={this.state.customerid} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Name</th>
                                    <td>
                                        <input name="customername" id="customername" value={this.state.customername} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Email</th>
                                    <td>
                                        <input name="customeremail" id="customeremail" value={this.state.customeremail} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Phone</th>
                                    <td>
                                        <input name="customerphone" id="customerphone" value={this.state.customerphone} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Password</th>
                                    <td>
                                        <input name="customerpw" id="customerpw" value={this.state.customerpw} onChange={this.handleChange} />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Join Mailing List</th>
                                    <td>
                                        <input
                                            type="radio"
                                            name="custmailer"
                                            id="custmaileryes"
                                            value="1"
                                            checked={this.state.selectedOption === "1"}
                                            onChange={this.handleOptionChange}
                                            className="form-check-input"
                                        /> YES
                                        <input
                                            type="radio"
                                            name="custmailer"
                                            id="custmailerno"
                                            value="0"
                                            checked={this.state.selectedOption === "0"}
                                            onChange={this.handleOptionChange}
                                            className="form-check-input"
                                        /> NO
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <input type="submit" value="Search Customer" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

var CustomerUpdateform = React.createClass({
    getInitialState: function () {
        return {
            upselectedOption: ""
        };
    },

    handleUpOptionChange: function (e) {
        this.setState({
            upselectedOption: e.target.value
        });
    },

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

        var upcustomerid = upcustid.value;
        var upcustomeremail = upcustemail.value;
        var upcustomername = upcustname.value;
        var upcustomerphone = upcustphone.value;
        var upcustomerpw = upcustpw.value;
        var upcustomermailer = "";

        if (upcustmaileryes.checked) {
            upcustomermailer = 1;
        }
        if (upcustmailerno.checked) {
            upcustomermailer = 0;
        }

        this.props.onUpdateSubmit({
            upcustomerid: upcustomerid,
            upcustomername: upcustomername,
            upcustomeremail: upcustomeremail,
            upcustomerphone: upcustomerphone,
            upcustomerpw: upcustomerpw,
            upcustomermailer: upcustomermailer
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Customer ID</th>
                                    <td>
                                        <input type="text" name="upcustid" id="upcustid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Name</th>
                                    <td>
                                        <input name="upcustname" id="upcustname" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Email</th>
                                    <td>
                                        <input name="upcustemail" id="upcustemail" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Phone</th>
                                    <td>
                                        <input name="upcustphone" id="upcustphone" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer Password</th>
                                    <td>
                                        <input name="upcustpw" id="upcustpw" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Join Mailing List</th>
                                    <td>
                                        <input
                                            type="radio"
                                            name="upcustmailer"
                                            id="upcustmaileryes"
                                            value="1"
                                            onChange={this.handleUpOptionChange}
                                            className="form-check-input"
                                        /> YES
                                        <input
                                            type="radio"
                                            name="upcustmailer"
                                            id="upcustmailerno"
                                            value="0"
                                            onChange={this.handleUpOptionChange}
                                            className="form-check-input"
                                        /> NO
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <br />
                        <input type="hidden" name="upcustkey" id="upcustkey" />
                        <input type="submit" value="Update Customer" />
                    </form>
                </div>
            </div>
        );
    }
});

var CustomerList = React.createClass({
    render: function () {
        var customerNodes = this.props.data.map(function (customer) {
            return (
                <Customer
                    key={customer.dbCustomerId}
                    custid={customer.dbCustomerId}
                    custname={customer.dbCustomerName}
                    custemail={customer.dbCustomerEmail}
                    custphone={customer.dbCustomerPhone}
                    custpw={customer.dbCustomerPassword}
                    custmailer={customer.dbCustomerMailer}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </Customer>
            );
        }.bind(this));

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

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

    updateRecord: function (e) {
        e.preventDefault();
        var theupcustid = this.props.custid;
        this.loadSingleCustomer(theupcustid);
    },

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

        var theupcustid = this.props.custid;

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

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

    loadSingleCustomer: function (theupcustid) {
        $.ajax({
            url: '/getsinglecustomer',
            data: {
                'upcustomerid': theupcustid
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ singledata: data });
                data.map(function (customer) {
                    upcustkey.value = customer.dbCustomerId;
                    upcustid.value = customer.dbCustomerId;
                    upcustemail.value = customer.dbCustomerEmail;
                    upcustphone.value = customer.dbCustomerPhone;
                    upcustname.value = customer.dbCustomerName;
                    upcustpw.value = "";

                    upcustmaileryes.checked = false;
                    upcustmailerno.checked = false;

                    if (customer.dbCustomerMailer == 1) {
                        upcustmaileryes.checked = true;
                    } else {
                        upcustmailerno.checked = true;
                    }
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.custid}</td>
                <td>{this.props.custname}</td>
                <td>{this.props.custemail}</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(
    <CustomerBox />,
    document.getElementById('content')
);