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

    loadAllowLogin: function () {
        $.ajax({
            url: '/getloggedin',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ viewthepage: data });
                console.log("Logged in:" + data);

                if (data != 0) {
                    this.loadCustTypes();
                }
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

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

    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,
                'customermailer': mailervalue,
                'customeractive': customeractive.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.loadAllowLogin();
    },

    render: function () {
        if (this.state.viewthepage == 0) {
            return (
                <div>NO ACCESS</div>
            );
        } else {
            return (
                <div>
                    <h1>Customers</h1>
                    <Customerform2
                        onCustomerSubmit={this.loadCustomersFromServer}
                        data={this.state.custtypedata}
                    />
                    <br />
                    <table>
                        <thead>
                            <tr>
                                <th>Customer ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Mailing List</th>
                                <th>Active</th>
                            </tr>
                        </thead>
                        <CustomerList data={this.state.data} />
                    </table>
                </div>
            );
        }
    }
});

var Customerform2 = React.createClass({
    getInitialState: function () {
        return {
            customerid: "",
            customername: "",
            customeremail: "",
            customerphone: "",
            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 customermailer = this.state.selectedOption;
        var thecustomeractive = customeractive.value;

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

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

    render: function () {
        return (
            <div>
                <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>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>
                            <tr>
                                <th>Active Status</th>
                                <td><CustTypeSelectList data={this.props.data} /></td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="submit" value="Search Customer" />
                </form>
            </div>
        );
    }
});

var CustTypeSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (custtypes) {
            return (
                <option
                    key={custtypes.dbCustTypeId}
                    value={custtypes.dbCustTypeId}
                >
                    {custtypes.dbCustTypeName}
                </option>
            );
        });

        return (
            <select name="customeractive" id="customeractive">
                <option value=""></option>
                {optionNodes}
            </select>
        );
    }
});

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}
                    custmailer={customer.dbCustomerMailer}
                    custactive={customer.dbIsActive}
                >
                </Customer>
            );
        });

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

var Customer = React.createClass({
    render: function () {
        var themailer = "";
        var theactive = "";

        if (this.props.custmailer == 1) {
            themailer = "YES";
        } else {
            themailer = "NO";
        }

        if (this.props.custactive == 1) {
            theactive = "ACTIVE";
        } else {
            theactive = "INACTIVE";
        }

        return (
            <tr>
                <td>{this.props.custid}</td>
                <td>{this.props.custname}</td>
                <td>{this.props.custemail}</td>
                <td>{this.props.custphone}</td>
                <td>{themailer}</td>
                <td>{theactive}</td>
            </tr>
        );
    }
});

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