import ImmutablePropTypes from 'react-immutable-proptypes';
import Loader from 'trc-client-core/src/components/Loader';
import LearningPlanLink from 'trc-client-core/src/learningPlan/LearningPlanLink';
import classnames from 'classnames';
import React from 'react';
import {List} from 'immutable';

var LearningPlanList = React.createClass({
    displayName: 'LearningPlanList',
    propTypes: {
        learningPlans: ImmutablePropTypes.list,
        filter: React.PropTypes.array,
        itemClassNamePrefix: React.PropTypes.string
    },
    render() {
        var pathways;

        if(!this.props.learningPlans) {
            return <Loader></Loader>;
        }

        pathways = this.props.learningPlans
            .sortBy(ii => ii.get('displayName'))
            .filter(learningPlan => {
                var {filter} = this.props;
                if(!filter) {
                    return true;
                }
                return filter.indexOf(learningPlan.get('careerPlanId')) !== -1;
            })
            .map((learningPlan, key) => {
                var {participantId} = this.props;
                var departmentCategory = learningPlan.getIn(['accessRule', 'departments']) || List();

                // Defaults
                var department = departmentCategory.size === 1 ? departmentCategory.get(0).toLowerCase() : '';

                // Certifications
                if(learningPlan.get('type') === 'Certification') {
                    icon = 0xE075;
                }

                // Markup
                if (department === 'b&p') {
                    department = 'body_paint';
                } else if(learningPlan.get('careerPlanId').indexOf('product') !== -1) {
                    department = 'product';
                }

                return <li key={key} className={classnames(this.props.itemClassNamePrefix + department)}>
                    <LearningPlanLink
                        participantId={participantId}
                        learningPlan={learningPlan}
                        className={this.props.linkClassName}>
                        {learningPlan.get('displayName')}
                    </LearningPlanLink>
                </li>;
            })
            .toJS();

        return <ul className={this.props.className}>{pathways}</ul>;
    }
});

module.exports = LearningPlanList;