import React from 'react';
import Reflux from 'reflux';
import RegistrationStore from 'trc-client-core/src/course/RegistrationStore';
import Loader from 'trc-client-core/src/components/Loader';
import RegistrationActions from 'trc-client-core/src/course/RegistrationActions';
import CourseStore from 'trc-client-core/src/course/CourseStore';
import SoRegistrationBox from 'trc-client-core/src/course/SoRegistrationBox';
import ScheduledOfferingRequest from 'trc-client-core/src/course/ScheduledOfferingRequest';



var RegistrationView = React.createClass({
    displayName: 'RegistrationView',
    mixins: [
        require('reflux-immutable/StoreMixin'),
        Reflux.listenTo(RegistrationStore, 'onStoreChange')
    ],
    propTypes: {
        courseCode: React.PropTypes.string.isRequired
    },
    getStoreState() {
        return {
            registrations: RegistrationStore.get('registrations'),
            cancellations: RegistrationStore.get('cancellations'),
            course: CourseStore.get('course'),
            soData: RegistrationStore.get('soData'),
            candidates: RegistrationStore.get('candidates'),
            error: RegistrationStore.get('error')
        };
    },
    componentDidMount() {
        RegistrationActions.fetchRegistrationData(this.props.courseId);
        RegistrationActions.fetchCandidates(this.props.courseId);
    },
    render() {
        if(this.state.error) {
            return <div className="InfoBox row2 l-70">{this.state.error}</div>;
        }

        if(this.state.candidates && this.state.candidates.size === 0) {
            return <div className="InfoBox row2 l-70">The user has no staff that they can enrol</div>;
        }

        return (
            <div className="RegistrationView">
                <h2>Enrol</h2>
                {this.renderSOItems()}
            </div>
        );
    },
    renderSOItems() {
        var {registrations, soData, candidates, cancellations} = this.state;
        var {course} = this.props;
        if(!registrations || !candidates || !soData) {
            return <Loader></Loader>;
        }

        if(soData.size === 0) {
            return <div className="InfoBox row2 l-70">
                <span>There are currently no scheduled classes for this course.</span>
                {course.get('stream') === 'TECH' ? <span>If you would like to register your interest, <a className="link" href={`/technical/makeRequest?courseCode=${course.get('courseCode')}`}>click here.</a></span> : null}
            </div>;
        }

        return soData.sortBy(so => so.get('soStartDate')).map((soItem, key) => {
            var soId = soItem.get('soId').toString();
            return <SoRegistrationBox
                key={`so-${key}`}
                registrations={registrations.get(soId)}
                cancellations={cancellations.get(soId)}
                course={course}
                allRegistrations={registrations.toList().flatten(true).concat(cancellations.toList().flatten(true))}
                candidates={candidates}
                courseCode={this.props.courseCode}
                soData={soItem}
            />;
        }).toList().toJS();
    }
});

module.exports = RegistrationView;