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

    loadReservationsFromServer: function () {
        $.ajax({
            url: '/getreservations',
            data: {
                'reservationid': reservationid.value,
                'customerid': customerid.value,
                'traineruserid': traineruserid.value,
                'resdate': resdate.value,
                'restime': restime.value,
                'trainingroom': trainingroom.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)
        });
    },

    deleteSingleReservationFromServer: function (reservation) {
        $.ajax({
            url: '/deletesinglereservation',
            dataType: 'json',
            data: reservation,
            type: 'POST',
            cache: false,
            success: function (data) {
                this.setState({ data: data });
                this.loadReservationsFromServer();

                upreservationkey.value = "";
                upreservationid.value = "";
                upcustomerid.value = "";
                uptraineruserid.value = "";
                upreservationdate.value = "";
                upreservationtime.value = "";
                uptrainingroom.value = "";
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

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

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

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

    componentDidMount: function () {
        this.loadReservationsFromServer();
        this.loadCustomers();
        this.loadTrainers();
    },

    render: function () {
        return (
            <div>
                <h1>Update Reservations</h1>
                <Reservationform2
                    onReservationSubmit={this.loadReservationsFromServer}
                    data={this.state.customerdata}
                    data2={this.state.trainerdata}
                />
                <br />
                <div id="theresults">
                    <div id="theleft">
                        <table>
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Reservation ID</th>
                                    <th>Customer ID</th>
                                    <th>Trainer User ID</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Training Room</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <ReservationList
                                data={this.state.data}
                                onDeleteSubmit={this.deleteSingleReservationFromServer}
                            />
                        </table>
                    </div>
                    <div id="theright">
                        <ReservationUpdateform
                            onUpdateSubmit={this.updateSingleReservationFromServer}
                            data={this.state.customerdata}
                            data2={this.state.trainerdata}
                        />
                    </div>
                </div>
            </div>
        );
    }
});

var Reservationform2 = React.createClass({
    getInitialState: function () {
        return {
            reservationkey: "",
            reservationid: "",
            resdate: "",
            restime: "",
            trainingroom: ""
        };
    },

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

        var reservationid = this.state.reservationid.trim();
        var thecustomerid = customerid.value;
        var thetraineruserid = traineruserid.value;
        var resdate = this.state.resdate.trim();
        var restime = this.state.restime.trim();
        var trainingroom = this.state.trainingroom.trim();

        this.props.onReservationSubmit({
            reservationid: reservationid,
            customerid: thecustomerid,
            traineruserid: thetraineruserid,
            resdate: resdate,
            restime: restime,
            trainingroom: trainingroom
        });
    },

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

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleSubmit}>
                        <h2>Reservations</h2>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Reservation ID</th>
                                    <td>
                                        <input
                                            type="text"
                                            name="reservationid"
                                            id="reservationid"
                                            value={this.state.reservationid}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer</th>
                                    <td><CustomerSelectList data={this.props.data} /></td>
                                </tr>
                                <tr>
                                    <th>Trainer</th>
                                    <td><TrainerSelectList data={this.props.data2} /></td>
                                </tr>
                                <tr>
                                    <th>Date</th>
                                    <td>
                                        <input
                                            name="resdate"
                                            id="resdate"
                                            type="date"
                                            value={this.state.resdate}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Time</th>
                                    <td>
                                        <input
                                            name="restime"
                                            id="restime"
                                            type="time"
                                            value={this.state.restime}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Training Room</th>
                                    <td>
                                        <input
                                            name="trainingroom"
                                            id="trainingroom"
                                            value={this.state.trainingroom}
                                            onChange={this.handleChange}
                                        />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <input type="submit" value="Search Reservation" />
                    </form>
                </div>
                <div>
                    <br />
                    <form onSubmit={this.getInitialState}>
                        <input type="submit" value="Clear Form" />
                    </form>
                </div>
            </div>
        );
    }
});

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

        var theupreservationkey = upreservationkey.value;
        var theupreservationid = upreservationid.value;
        var theupcustomerid = upcustomerid.value;
        var theuptraineruserid = uptraineruserid.value;
        var theupreservationdate = upreservationdate.value;
        var theupreservationtime = upreservationtime.value;
        var theuptrainingroom = uptrainingroom.value;

        this.props.onUpdateSubmit({
            upreservationkey: theupreservationkey,
            upreservationid: theupreservationid,
            upcustomerid: theupcustomerid,
            uptraineruserid: theuptraineruserid,
            upreservationdate: theupreservationdate,
            upreservationtime: theupreservationtime,
            uptrainingroom: theuptrainingroom
        });
    },

    render: function () {
        return (
            <div>
                <div id="theform">
                    <form onSubmit={this.handleUpSubmit}>
                        <table>
                            <tbody>
                                <tr>
                                    <th>Reservation ID</th>
                                    <td>
                                        <input type="text" name="upreservationid" id="upreservationid" readOnly />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Customer</th>
                                    <td><CustomerUpdateSelectList data={this.props.data} /></td>
                                </tr>
                                <tr>
                                    <th>Trainer</th>
                                    <td><TrainerUpdateSelectList data={this.props.data2} /></td>
                                </tr>
                                <tr>
                                    <th>Date</th>
                                    <td>
                                        <input name="upreservationdate" id="upreservationdate" type="date" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Time</th>
                                    <td>
                                        <input name="upreservationtime" id="upreservationtime" type="time" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>Training Room</th>
                                    <td>
                                        <input name="uptrainingroom" id="uptrainingroom" />
                                    </td>
                                </tr>
                            </tbody>
                        </table><br />
                        <input type="hidden" name="upreservationkey" id="upreservationkey" />
                        <input type="submit" value="Update Reservation" />
                    </form>
                </div>
            </div>
        );
    }
});

var ReservationList = React.createClass({
    render: function () {
        var reservationNodes = this.props.data.map(function (reservation) {
            return (
                <Reservation
                    key={reservation.dbReservetionId}
                    reservationkey={reservation.dbReservetionId}
                    reservationid={reservation.dbReservetionId}
                    customerid={reservation.dbCustomerId}
                    traineruserid={reservation.dbTrainerUserId}
                    resdate={reservation.dbResDate}
                    restime={reservation.dbResTime}
                    trainingroom={reservation.dbTrainingRoom}
                    onDeleteSubmit={this.props.onDeleteSubmit}
                >
                </Reservation>
            );
        }.bind(this));

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

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

    updateRecord: function (e) {
        e.preventDefault();
        var theupreservationkey = this.props.reservationkey;
        this.loadSingleReservation(theupreservationkey);
    },

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

        var theupreservationkey = this.props.reservationkey;

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

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

    loadSingleReservation: function (theupreservationkey) {
        $.ajax({
            url: '/getsinglereservation',
            data: {
                'upreservationid': theupreservationkey
            },
            dataType: 'json',
            cache: false,
            success: function (data) {
                console.log(data);
                data.map(function (reservation) {
                    var thedate = reservation.dbResDate;
                    var thetime = reservation.dbResTime;

                    if (thedate) {
                        thedate = thedate.toString().split('T')[0];
                    }

                    if (thetime) {
                        thetime = thetime.toString().substring(0, 5);
                    }

                    upreservationkey.value = theupreservationkey;
                    upreservationid.value = reservation.dbReservetionId;
                    upcustomerid.value = reservation.dbCustomerId;
                    uptraineruserid.value = reservation.dbTrainerUserId;
                    upreservationdate.value = thedate;
                    upreservationtime.value = thetime;
                    uptrainingroom.value = reservation.dbTrainingRoom;
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    render: function () {
        return (
            <tr>
                <td>{this.props.reservationkey}</td>
                <td>{this.props.reservationid}</td>
                <td>{this.props.customerid}</td>
                <td>{this.props.traineruserid}</td>
                <td>{this.props.resdate}</td>
                <td>{this.props.restime}</td>
                <td>{this.props.trainingroom}</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>
        );
    }
});

var CustomerSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (customers) {
            return (
                <option
                    key={customers.dbCustomerId}
                    value={customers.dbCustomerId}
                >
                    {customers.dbCustomerName}
                </option>
            );
        });

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

var TrainerSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (trainers) {
            return (
                <option
                    key={trainers.dbUserId}
                    value={trainers.dbUserId}
                >
                    {trainers.dbUsername}
                </option>
            );
        });

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

var CustomerUpdateSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (customers) {
            return (
                <option
                    key={customers.dbCustomerId}
                    value={customers.dbCustomerId}
                >
                    {customers.dbCustomerName}
                </option>
            );
        });

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

var TrainerUpdateSelectList = React.createClass({
    render: function () {
        var optionNodes = this.props.data.map(function (trainers) {
            return (
                <option
                    key={trainers.dbUserId}
                    value={trainers.dbUserId}
                >
                    {trainers.dbUsername}
                </option>
            );
        });

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

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