import React from 'react';
import Reflux from 'reflux';
import Icon from 'trc-client-core/src/components/Icon';
import StoreMixin from 'reflux-immutable/StoreMixin';
import SodataStore from 'trc-client-core/src/sodata/SodataStore';
import SodataActions from 'trc-client-core/src/sodata/SodataActions';
import Time from 'trc-client-core/src/components/Time';
import Loader from 'trc-client-core/src/components/Loader';

var CourseCalendar = React.createClass({
    displayName: 'CourseCalendar',
    mixins: [
        StoreMixin,
        Reflux.listenTo(SodataStore, 'onStoreChange')
    ],
    componentWillMount() {
        this.requestData(this.props);
    },
    componentWillReceiveProps(nextProps) {
        if(this.props.department !== nextProps.department) {
            this.requestData(nextProps);
        }
    },
    requestData(props) {
        var query = props.queryString || {
            department: props.department
        };

        SodataActions.fetchCourseCalendar(query);
    },
    getStoreState(){
        return {
            courseCalendar: SodataStore.get('courseCalendar')
        };
    },
    render() {
        if(!this.state.courseCalendar) {
            return <Loader/>;
        }

        if(!this.state.courseCalendar.size) {
            return <div className="InfoBox">There are currently no scheduled offerings in this region.</div>;
        }

        return (
            <ul>{this.renderMonth()}</ul>
        );
    },
    renderMonth(soCollection, key) {
        return this.state.courseCalendar.map((soCollection, key) => {
            return <li key={key}>
                <h2 className={`Bar Bar-${this.props.department}`}>{soCollection.get('month')}</h2>
                <ul className="CourseList CourseList-alternate">{this.renderCourses(soCollection)}</ul>
            </li>;
        }).toList().toJS();
    },
    renderCourses(soCollection) {
        return soCollection.get('courses').map((soItems) => {
            var course = soItems.get(0).get('course');
            var details = soItems.get(0).get('descriptionDetails');

            return (
                <li key={course.get('courseCode')}>
                    <Icon hexCode={details.get('courseIcon')} className="right"/>
                    <h3 className="hug margin-bottom05"><a href={`/#/course/${course.get('courseCode')}`}>{course.get('workshopName')}</a></h3>
                    <ul>{this.renderSoData(soItems)}</ul>          
                </li>
            );
        }).toList().toJS();
    },
    renderSoData(soItems) {
        return soItems.map(item => {
            var soData = item.get('soData');
            return (
                <li key={soData.get('soId')}>
                    <a href={`/#/course/${item.get('course').get('courseCode')}`}>
                        <Time format="ddd Do">{soData.get('soStartDate')}</Time>
                        <span> - {soData.get('facility')}</span>
                        <span className="margin-left05 t-muted">{this.renderSpotsLeft(soData)}</span>
                    </a>
                </li>
            );
        }).toList().toJS();
    },
    renderSpotsLeft(soData) {
        var remainingPlaces = soData.get('soMaximumEnrolment') - soData.get('soNoParticipants');
        if(remainingPlaces <= 0) {
            return <span>Full</span>;
        }

        return <span>{remainingPlaces} spots left</span>;
    }
});

export default CourseCalendar;