import React from 'react';
import {Link} from 'react-router';
import {List} from 'immutable';
import classnames from 'classnames';
import CourseActivityModal from 'trc-client-core/src/course/CourseActivityModal';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import CourseProcess from 'trc-client-core/src/components/CourseProcess';
import Time from 'trc-client-core/src/components/Time';
import DataTable from 'bd-stampy/components/DataTable';

var GapReportGrid = React.createClass({
    displayName: 'GapReportGrid',
    onCellClick(course, participant) {
        if(course.type !== 'CERTIFICATION') {
            ModalManager.showModal(CourseActivityModal, {
                courseCode: course.courseCode,
                participantId: participant.participantId
            });
        }
    },
    filterRows(row) {
        if(this.props.filter) {
            return `${row.firstName}${row.lastName}`.toLowerCase().indexOf(this.props.filter.toLowerCase()) !== -1;
        }
        return true;
    },
    getTableSchema() {
        return List([{
            heading: 'Name',
            filter: (item) => item.firstName + item.lastName,
            render: (item) => <Link to={`/portal/${item.participantId}`} className="link">{`${item.firstName} ${item.lastName}`}</Link>
        }])
        .concat(this.props.data.getIn([0, 'gapData']).map(course => {
            return {
                heading: course.get('workshopName'),
                render: (ii) => {
                    var {completeDate, completionProcess} = ii.gapData.filter(gap => gap.courseCode === course.get('courseCode'))[0];
                    var processClasses = classnames({
                        't-success': /(ATTEND|CREDIT|COMPLETE)/.test(completionProcess),
                        't-warning': /(IN_PROGRESS|WAITLIST|ENROLL)/.test(completionProcess),
                        't-fail':    /(CANCELLED|NO_SHOW)/.test(completionProcess),
                    });
                    return <div>
                        <CourseProcess className={processClasses} data={completionProcess} />
                        <div className="t-muted">
                            <Time type="humanShort" nullValue="-">{completeDate}</Time>
                        </div>
                    </div>;
                }
            }
        }))
        .toJS();
    },
    render() {
        return (
            <div style={{overflow: 'auto'}}>
                <DataTable
                    schema={this.getTableSchema()}
                    data={this.props.data.toJS()}
                    search={this.props.filter}
                    modifier="data"
                />
            </div>
        );
    }
});

module.exports = GapReportGrid;