import React from 'react';
import Select from 'trc-client-core/src/components/Select';
import moment from 'moment';

var SoItemSelect = React.createClass({
    displayName: 'SoItemSelect',
    propTypes: {
        onChange: React.PropTypes.func,
        soData: React.PropTypes.object.isRequired, // Immutable
        currentEnrollment: React.PropTypes.object // Immutable
    },
    getOptionShape(item) {
        var soStartDate = moment(new Date(item.get('soStartDate'))).format("DD MMM YYYY, ddd hh:mm a");
        var remainingPlaces = item.get('soMaximumEnrolment') - item.get('soNoParticipants');

        return {
            value: item.get('soId'),
            disabled: remainingPlaces < 1 || this.getIsEnrolled(item),
            label: `${soStartDate} - ${item.get('facility')} - ${remainingPlaces} spots left`
        };
    },
    getIsEnrolled(item) {
        if(this.props.currentEnrollment) {
            return item.get('soId') === this.props.currentEnrollment.get('soId');
        }
        return false;
    },
    onChange(ee, details) {
        if(this.props.onChange) {
            this.props.onChange(ee, details);
        }
    },
    render() {
        return <Select
            name="soId"
            placeholder="Sessions"
            onChange={this.onChange}
            value={this.props.value}
            options={this.props.soData.map(this.getOptionShape).toList().toJS()}
            clearable={false}
        />;
    }
});

module.exports = SoItemSelect;