import React            from 'react'
import {connect}        from 'react-redux'
import {Link}           from 'react-router-dom'
import {browserHistory} from 'react-router'
import moment           from 'moment'

//import event from '../../events'
import {redirectFromThanks} from '../actions.js'
import {
    Row,
    Col,
    Table
}                           from 'reactstrap';
import ReactMarkdown        from 'react-markdown'
import ageFactory           from "../../age";
import feeFactory           from '../../../shared/fee/feeFactory.js'


//confirmation page for bookings

class ThanksPage extends React.Component {

    constructor(props) {
        super(props);

        this.event = this.props.Event.toJS();
        this.user = this.props.User.toJS();
        this.booking = this.props.Booking.toJS();

        this.ageWidgets = ageFactory(this.event);
        this.fees = feeFactory(this.event);

    }

    render() {

        const event = this.props.Event.toJS();
        const user = this.props.User.toJS();

        const ageWidgets = ageFactory(event);

        //this is some unholy hack to get the thanks page to redirect back to the booking form if the user does not have a booking and will never actually come up in the real world.


        const booking = this.props.Booking.toJS();

        const participants = booking.participants.map(p => {
            p.age = ageWidgets.displayAgeMoment(p.age, event);
            return p;
        }).map(p => <ParticipantRow key={p.id} {...p} />);


        return (<React.Fragment>
            <Row>
            <Col>
                <h3>Thanks for booking for {event.name}</h3>
                <p>You can come back and <Link to={"/event/" + event.id + "/book"}>edit</Link> your booking at any time
                    before the deadline</p>
                <h4>Participants booked</h4>
                <Table striped>
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Diet</th>
                    </tr>
                    </thead>
                    <tbody>
                    {participants}
                    </tbody>
                </Table>
            </Col>
            </Row>
            <this.fees.ThanksRow
                event={this.event}
                booking={booking}/>
            <Row>
                <ReactMarkdown escapeHtml={true} source={event.paymentInfo}/>
            </Row>
        </React.Fragment>);
    }
}

const ParticipantRow = props => <tr>
    <td>{props.name}</td>
    <td>{props.age}</td>
    <td>{props.diet}</td>
</tr>;

class ThanksPageWrapper extends React.Component {

    constructor(props) {
        super(props);
        this.hasBooking = this.props.Booking
    }

    render() {
        if (this.props.Booking) return <ThanksPage {...this.props}/>;
        else {
            //this is some unholy hack to get the thanks page to redirect back to the booking form if the user does not have a booking and will never actually come up in the real world.
            setImmediate(this.props.redirectFromThanks, this.props.Event.get('id'));
        }
    }
}

const mapStateToProps = (state, props) => {
    let User = state.getIn(["User", "user"]);
    let Event = state.getIn(["Events", "events", parseInt(props.match.params.eventId)]);
    let Booking = state.getIn(["Bookings", "bookings"]).find(b => b.get("userId") === User.get("id") && b.get("eventId") === Event.get("id"));
    return {User, Event, Booking}
};

//const getEvent = event.actions.getEvent
const mapDispatchToProps = {redirectFromThanks};

const VisibleThanksPage = connect(
    mapStateToProps,
    mapDispatchToProps
)(ThanksPageWrapper);

export default VisibleThanksPage;
@@ -537,16 +537,78 @@
 ory.js'%0A
+import W                    from %22../../../shared/woodcraft%22;%0A
 %0A%0A//conf
@@ -1353,33 +1353,32 @@
 Booking.toJS();%0A
-%0A
         const pa
@@ -1379,22 +1379,53 @@
 nst 
-participants =
+startDate = moment(event.startDate);%0A%0A       
  boo
@@ -1442,19 +1442,23 @@
 cipants.
-map
+forEach
 (p =%3E %7B%0A
@@ -1478,33 +1478,34 @@
 .age
- = ageWidgets.displayAgeM
+AtStart = startDate.diff(m
 omen
@@ -1515,50 +1515,218 @@
 .age
+)
 , 
-event);%0A            return p;%0A        %7D)
+'years');%0A            p.ageGroup = W.find(w =%3E w.filter(p.ageAtStart)).singular;%0A            p.displayAge = ageWidgets.displayAgeParticipant(p);%0A        %7D);%0A%0A        const participants = booking.participants
 .map
@@ -2853,17 +2853,24 @@
 %3E%7Bprops.
-a
+displayA
 ge%7D%3C/td%3E

Fix Fee calculation on Thanks page