var React = require('react');
var Reflux = require('reflux');
var {History, State, Link} = require('react-router');
var RegistrationStore = require('trc-client-core/src/course/RegistrationStore');
var Time = require('trc-client-core/src/components/Time');
var UserStore = require('trc-client-core/src/user/UserStore');

var RegistrationResultsView = React.createClass({
    displayName: 'RegistrationResultsView',
    mixins: [
        History,
        State,
        require('reflux-immutable/StoreMixin'),
        require('trc-client-core/src/mixins/CourseMixin'),
        Reflux.listenTo(RegistrationStore, 'onStoreChange')
    ],
    getStoreState() {
        return {
            results: RegistrationStore.get('successfulRegistrations'),
            soData: RegistrationStore.get('soData'),
            candidates: RegistrationStore.get('candidates')
        };
    },
    componentWillMount() {
        if(!RegistrationStore.get('successfulRegistrations')) {
            this.history.pushState(null, `/course/${this.props.params.id}`);
        }
        this.onStoreChange();
    },
    getFailure() {
        return this.state.results
            .filter(ii => !ii.get('success'))
            .size
    },
    render() {
        if(!this.state.results) {
            return null;
        }

        return (
            <div className="margin-top2 margin-bottom2 l-center w80">
                <h1 className="t-center">{this.renderTitle()}</h1>

                <table className="Table Table-tight">
                    <tbody>
                        {this.state.results.map(this.renderRegistrationRows).toJS()}
                    </tbody>
                </table>
                {this.renderDisclaimer()}
                <Link to={`/course/${this.props.params.id}`} className="cta-back">return to course details</Link>
            </div>
        );
    },
    renderTitle() {
        var {candidates, results} = this.state;
        if (candidates) {
            if(this.getFailure()) {
                return 'Some of your registrations failed';
            } else {
                return 'Your registrations were a success';
            }
        } else {
            return 'Your request has been sent';
        }
    },
    renderDisclaimer() {
        if(this.state.candidates) {
            return <div>
                {this.getFailure() ? <p>Either the course was full and does not accept waitlists, or you have attempted to enrol a user who has not met a course&apos;s prerequisites. Please confirm the enrolment list on the course page, or check your Training Activity Status report.</p> : null}
                <p className="t-muted">Please read the following registration results carefully. Whilst every effort is made to display accurate availability in courses, it is possible that places in sessions have been recorded concurrently on the TRC whilst your registrations were recorded. (For example: a waitlisted enrolment is cancelled in another dealership, creating a spot in a session that was full.) </p>
            </div>;
        }

        return <span>By clicking Request Training, an email will be generated and sent to your Manager with the requested training details. It is your Manager&apos;s responsibility to approve this request. By clicking &apos;Request Training&apos;, you agree to <a href="/terms" className="link">Toyota Institute Australia&apos;s Terms and Conditions.</a></span>;
    },
    renderRegistrationRows(item, key) {
        var {participantId, status, success, soId} = item.toObject();
        var soItem = this.state.soData.get(soId.toString());
        var className = success ? `t-${status}` : 't-fail';

        function UserCell(candidates, participantId) {
            if (candidates) {
                const user = candidates.get(participantId);
                return <td>{user.get('firstName')} {user.get('lastName')}</td>;
            }
        }


        return <tr key={key} className={className}>
            <td>{success ? this.getPrettyStatus(status) : 'FAILURE'}</td>
            {UserCell(this.state.candidates, participantId)}
            <td>{soItem.get('facility')}</td>
            <td className="l-25"><Time tz={soItem.get('soTimeZone')}>{soItem.get('soStartDate')}</Time></td>
        </tr>
    }
});

module.exports = RegistrationResultsView;