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

var PortalTrainingHistory = React.createClass({
    displayName: 'PortalTrainingHistory',
    mixins: [CourseMixin],
    render() {
        return (
            <div>
                {this.renderTrainingContent() }
                <p><em> If you believe any of the above information to be incorrect, we&apos;d love to hear from you. Please contact the
                <Auth site="TOYOTA"><a className="link" href="mailto:training@toyota.com.au"> Toyota Institute Australia helpdesk </a></Auth>
                <Auth site="LEXUS"><a className="link" href="mailto:training@lexus.com.au"> Lexus Academy helpdesk </a></Auth>
                </em></p>
            </div>
        );
    },
    renderTrainingContent() {
        if(!this.props.trainingHistory){
            return <Loader></Loader>;
        }

        var tableSchema = [{
            heading: 'Course',
            filter: (item) => item.course.workshopName,
            width: '30%',
            render: (item) => <a className="readmore" href={`/#/course/${item.course.courseCode}`}>{item.course.workshopName}</a>
        }, {
            heading: 'Course Code',
            filter:  (item) => item.course.courseCode,
            render: (item) => item.course.courseCode
        }, {
            heading: 'Completion Status',
            filter: 'status',
            render: (item) => this.getPrettyStatus(item.status)
        }, {
            heading: 'Completion Date',
            filter: (item) => item.commentDetails.commentDate,
            // render: (item) => moment(new Date(item.commentDetails.commentDate || "-")).format('DD/MM/YYYY')
            render: (item) => <Time format="DD/MM/YYYY">{item.commentDetails.commentDate}</Time>
        }];

        return <DataTable
            schema={tableSchema}
            data={this.props.trainingHistory.reverse().toJS()}
            modifier="data"
            empty={<div className="Table_empty">No training history to display</div>}
        />;
    }
});

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