import React from 'react';

import {CERTIFICATION} from 'trc-client-core/src/constants/CourseType';
import Time from 'trc-client-core/src/components/Time';
import CourseProcess from 'trc-client-core/src/components/CourseProcess';

class CourseActivityHistory extends React.Component {
    render() {
        var {course, participation} = this.props;
        if(this.props.courseType === 'VIDEO') {
            return null;
        }

        var learningItems = this.props.participation.get('history');

        if(learningItems.size) {
            learningItems = learningItems.map((item, key)=>{
                var details;
                if(this.props.soData && item.get('process') === 'ENROLLED') {
                    details = <span>
                        <Time value={this.props.soData.get('soStartDate')}/>
                        <span> - </span>
                        <span>{this.props.soData.get('facility')}</span>
                    </span>;
                } else {
                    details = <Time value={item.get('date')}/>;
                }
                return (
                    <li key={key}>
                        <strong className="t-capitalize"><CourseProcess data={item.get('process')}/></strong> - {details}
                    </li>
                );
            }).toJS();
        } else {
            if (course.get('type') === CERTIFICATION) {
                learningItems = <em>{participation.get('firstName')} has not achieved this certification.</em>;
            } else {
                learningItems = <em>{participation.get('firstName')} is yet to complete this course.</em>;
            }
        }

        return (
            <div className="Widget column-flush2 padding">
                <ul className="List">{learningItems}</ul>
            </div>
        );
    }
}

export default CourseActivityHistory;