import React from 'react';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';

import SodataStore from 'trc-client-core/src/sodata/SodataStore';
import RegistrationStore from 'trc-client-core/src/course/RegistrationStore';
import RegistrationActions from 'trc-client-core/src/course/RegistrationActions';
import SodataActions from 'trc-client-core/src/sodata/SodataActions';

import Select from 'trc-client-core/src/components/Select';
import UserStore from 'trc-client-core/src/user/UserStore';
import Label from 'bd-stampy/components/Label';
import Loader from 'trc-client-core/src/components/Loader';
import SoItemSelect from 'trc-client-core/src/course/SoItemSelect';

var RegistrationSingle = React.createClass({
    displayName: 'RegistrationSingle',
    mixins: [
        require('bd-stampy/mixins/FormMixin'),
        Reflux.listenTo(RegistrationStore, 'onStoreChange'),
        Reflux.listenTo(SodataStore, 'onStoreChange'),
        StoreMixin
    ],
    propTypes: {
        participantId: React.PropTypes.string.isRequired,
        courseCode: React.PropTypes.string.isRequired
    },
    getInitialState() {
        return {};
    },
    getStoreState() {
        return {
            soItem: SodataStore.get('soItem'),
            soData: RegistrationStore.get('soData')
        };
    },
    componentDidMount() {
        RegistrationActions.fetchRegistrationData(this.props.courseCode);
        var {courseCode, participantId, actionable} = this.props;
        SodataActions.fetchSoItem({courseCode, participantId, actionable});
    },
    onFormChange(e, details) {
        this.FormMixin_onFormChange(e, details, this.onChange);
    },
    onChange(e) {
        if(this.props.onChange) {
            this.props.onChange(e, this.state.formData);
        }
    },
    render() {
        if(!this.state.soData || !this.state.soItem) {
            return <Loader></Loader>;
        }

        if(!this.state.soData.size) {
            return <div className="InfoBox">There are currently no scheduled classes for this course.</div>;
        }

        if(UserStore.is('ROLE_MANAGER')) {
            return this.renderEnrol();
        }

        return this.renderRequest();
    },
    renderEnrol() {
        return <div>
            <h3>Enrol</h3>
            {this.renderSessions()}
        </div>;
    },
    renderSessions() {
        return <div>
            <Label>Choose a session</Label>
            <SoItemSelect
                soData={this.state.soData}
                onChange={this.onFormChange}
                value={this.state.formData.soId}
                currentEnrollment={this.props.currentEnrollment}
            />
        </div>;
    },
    renderRequest() {
        var managerOptions = this.state.soItem.get('managers').map(item => {
            return {
                value: item.get('participantId'),
                label: `${item.get('firstName')} ${item.get('lastName')}`
            };
        }).toJS();

        return (
            <div>
                <h3>Request Training</h3>
                <p><small><em>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></em></small></p>
                {this.renderSessions()}

                <Label>and select a manager</Label>
                <Select
                    name="manager"
                    placeholder="Managers"
                    onChange={this.onFormChange}
                    value={this.state.formData.manager}
                    options={managerOptions}
                    clearable={false}
                />
            </div>
        );
    },
    renderTitle() {
        return (UserStore.is('ROLE_MANAGER')) ? 'Choose a Session' : 'Request Training Session';
    }
});

module.exports = RegistrationSingle;