import React from 'react';
import moment from 'moment';
import {Link} from 'react-router';
import {connect} from 'react-redux';
import CourseMixin from 'trc-client-core/src/mixins/CourseMixin';
import Loader from 'trc-client-core/src/components/Loader';
import DataTable from 'bd-stampy/components/DataTable';

var PortalDashboardView = React.createClass({
    displayName: 'PortalDashboardView',
    mixins: [CourseMixin],
    render() {
        return (
            <div>
                <h2>Enrolments</h2>
                {this.renderTable(this.props.currentEnrollments, 'Enrolments')}
                <h2>Waitlists</h2>
                {this.renderTable(this.props.currentWaitlists, 'Waitlists')}
            </div>
        );
    },
    renderTable(data, name) {
        if(!data){
            return <Loader></Loader>;
        }

        var empty = <div className="Table_empty">{`No Current ${name} to display`}</div>;

        return <DataTable
            schema={this.renderTableSchema()}
            data={data.toJS()}
            modifier="data"
            empty={empty}
        />;
    },
    renderTableSchema() {
        return [{
            heading: 'Course',
            filter: (item) => item.soData.soItemName,
            width: '40%',
            render: (item) => {
                return <Link className="readmore" to={`/course/${item.courseMatrix.courseCode}`}>{item.courseMatrix.workshopName}</Link>
            }
        }, {
            heading: 'Start Date',
            filter:  (item) => item.soData.soStartDate,
            render: (item) => item.soData ? moment(new Date(item.soData.soStartDate)).format('DD/MM/YYYY') : '-'
        }, {
            heading: 'Location',
            filter: (item) => item.soData.facility,
            render: (item) => item.soData ? item.soData.facility : '-'
        }, {
            heading: 'Status',
            filter: 'registrationProcess',
            render: (item) => this.getPrettyStatus(item.registrationProcess)
        }];
    }
});

module.exports = connect(
    (state) => {
        return {
            currentEnrollments: state.participant.getIn(['dashboard','currentEnrollments']),
            currentWaitlists: state.participant.getIn(['dashboard','currentWaitlists'])
        }
    }
)(PortalDashboardView);