var ReservationBox = React.createClass({
    getInitialState: function () {
        return { data: [],
                 customers: [],
                 trainers: [] };
    },
    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)
        });

    },
    loadCustomers: function () {
        $.ajax({
            url: '/getcustomers',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({ customers: 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({ trainers: 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();
       // setInterval(this.loadReservationsFromServer, this.props.pollInterval);
    },

    render: function () {
        return (
            <div>
                <h1>Reservations</h1>
                <Reservationform2 onReservationSubmit={this.loadReservationsFromServer} customers={this.state.customers} trainers={this.state.trainers} />
                <br />
                <table>
                        <thead>
                            <tr>
                                <th>Reservation ID</th>
                                <th>Customer ID</th>
                                <th>Trainer User ID</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Training Room</th>
                            </tr>
                         </thead>
                        <ReservationList data={this.state.data} />
                    </table>
                
            </div>
        );
    }
});

var Reservationform2 = React.createClass({
    getInitialState: function () {
        return {
            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 (
            <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.customers} /></td>
                        </tr>
                        <tr>
                            <th>Trainer</th>
                            <td><TrainerSelectList data = {this.props.trainers} /></td>
                        </tr>
                        <tr>
                            <th>Date</th>
                            <td>
                                <input name="resdate" id="resdate" value={this.state.resdate} onChange={this.handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>Time</th>
                            <td>
                                <input name="restime" id="restime" 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>
        );
    }
});

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

var Reservation = React.createClass({

    render: function () {

        return (

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

var CustomerSelectList = React.createClass ({
    render: function () {
        var optionNodes = this.props.data.map(function (customer) {
            return (
                <option
                    key = {customer.dbCustomerId}
                    value= {customer.dbCustomerId}
                >
                    {customer.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 (trainer) {
            return (
                <option
                    key = {trainer.dbUserId}
                    value= {trainer.dbUserId}
                >
                    {trainer.dbUsername}        
                </option>
            );
        });
        return (
            <select name = "traineruserid" id = "traineruserid">
                <option value =""></option>
                {optionNodes}
            </select>
        );
    }
});

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