import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import {participantDashboardRequest} from 'trc-client-core/src/participant/ParticipantActions';
import Loader from 'trc-client-core/src/components/Loader';
import AutoRequest from 'trc-client-core/src/components/AutoRequest';
import Time from 'trc-client-core/src/components/Time';
import Table from 'bd-stampy/components/Table';
import UserStore from 'trc-client-core/src/user/UserStore';

var COURSE_LIST = ["NMI", "NMI4WD", "NMI4WDandSUV", "NMI86GT", "NMIAURION", "NMIAURION_HYBRIDS2012", "NMICAMRY", "NMICAMRYHYBRID", "NMICAMRYHYUNDAI", "NMICOROLLA2012", "NMICOROLLASEDAN", "NMI Corolla Sedan & Kluger", "NMIFJCRUISER", "NMIHILUX", "NMIHILUXPRADO", "NMIHYBRID", "_NMIHYBRIDFORUSEDCARS", "NMIKLUGER", "NMILANDCRUISER", "NMILC200", "NMILC200HILUX", "NMILC70", "NMILEXUSLS", "NMILM's", "NMIPRADO", "NMIPRIUS", "NMIPRIUSC", "NMIPRIUSV", "NMIRAV4", "NMIRTS", "NMIRUKUS", "NMI TOYOTALINK", "NMIYARIS", "NMI YARIS HATCH", "DNMI", "NMI380NCAMRY", "NMI4WDBASICS", "NMI4WDTECHNOLOGY", "NMI4X4", "NMI660TCAMRY", "NMIALALONCAMRY", "NMIAURIONINDEALERSHIP", "NMIAUSSIEADVOCATES", "NMIAVALON", "NMIAVALONRAV4", "NMIAVALONTAXI", "NMIAVENSIS", "NMIAWD", "NMICAMRYCOROLLA", "NMICAMRYCOROLLAFACELIFT", "NMICAMRYFACELIFT", "NMICAMRYHILUX", "NMICAMRYHYBRIDCOROLLA", "NMICAMRYINDEALERSHIP", "NMICAMRYKLUGER", "NMICAMRYPRIUS", "NMICAMRYRUKUS", "NMICAMRYSTUDYTOURFLEET", "NMICAMRYSTUDYTOURRETAIL", "NMICAMRYTELEMATICS", "NMICELICA", "NMICELICAECHO", "NMICHARADE", "NMICMARYINDEALERSHIP", "NMICOROLLA", "NMICOROLLAAVENSIS", "NMICOROLLACAMRY", "NMICOROLLAECHO", "NMICOROLLARAV4", "NMICOROLLAVSHYUNDAI", "NMICOROLLAVSMAZDA3", "NMICOROLLAYARIS", "NMIDAIHATSU", "NMIDAIHATSUDELTA", "NMIDAIHATSUSIRION", "NMIDELTA", "NMIDENSO", "NMIDYNA", "NMIDYNA11", "NMIECHO", "NMIECHOCELICA", "NMIECHOPRADO", "NMIFLEETSTRATEGY", "NMIGENRALPROUDCTKNOWLEDGE", "NMIGRANDFINAL", "NMIGS300", "NMIGS450H", "NMIHIACE", "NMIHIACEHILUX", "NMIHILUXCAMRY", "NMIHILUXHIACE", "NMIHILUXKLUGERPRADO", "NMIHILUXLC101", "NMIHILUXPRADOAVALON", "NMIHILUXV6LC100V8", "NMIHSD", "NMIHYBRIDCAMRY", "NMIHYBRIDFOLLOWUP", "NMIINDEALERSHIPCAMRY", "NMIIS250", "NMIKINETICTORSEN", "NMIKINETICTORSENLOADCAPACITY", "NMIKLUGERAVALONPRIUS", "NMIKLUGERHILUX", "NMIKLUGERINDEALERSHIP", "NMIKLUGERPRADO", "NMIKLUGERVSTERRITORY", "NMIL", "NMILANDCRUISER78ECHO", "NMILC100", "NMILC200ROADSHOW", "NMILC70HILUXCOROLLA", "NMILC70TARAGOV6", "NMILEMODELS", "NMILKUGER", "NMILM", "NMILMCAMRY", "NMIMAZDAVSYARISMAZDA3VSCOROLLA", "NMIMODELLINEUP", "NMIMOTORSHOW", "NMINEWCAMRY", "NMINEWEMPLOYEEINDUCTION", "NMINEWMODELINTRODUCTION", "NMINGPRADO", "NMINGPRADOINDEALERSHIP", "NMINGPRIUS", "NMINGPRIUSINDEALERSHIP", "NMIPRADOKLUGER", "NMIPRIUSACCREDITATION", "NMIPRIUSINDEALERSHIP", "NMIPRIUSROADSIDEASSIST", "NMIPRIUS(SERVICEADVISER)", "NMIPRIUSSINGLETONTOYOTA", "NMIPRIUSTAREEMOTORAMA", "NMIRAV4TARAGOYARISSEDAN", "NMIRAV4YARIS", "NMIRTAS", "NMIRUKUSHYBRIDCAMRY", "NMIRURAL", "NMISALESPRODUCTTRAINING", "NMISATNAV", "NMISTARLET", "NMISUV", "NMITARAGO", "NMITARAGOAVALON", "NMITARAGOV6", "NMITARAGOYARIS", "NMITARAGOYARISSEDAN", "NMITORESENKDSS", "NMITOYOTAVSHYUNDAI", "NMITRD", "NMITRDAURION", "NMITRDAURIONINDEALERSHIP", "NMITRDHILUX", "NMIYARISANDPROFESSOR", "NMIYARISCOROLLA", "NMIYARISRAV4TARAGO", "NMIYARISSEDAN", "NMIYARISTARAGO", "NMIYARISVSGETZ", "NMIYARISVSMAZDA2", "NNMICOROLLAROADSHOW", "TEC_OENMI05HIL"];

var ProductLearningPlanFaceToFace = React.createClass({
    displayName: 'ProductLearningPlanFaceToFace',
    render() {
        return (
            <div>
                <div className="Bar Bar-product">Face To Face</div>
                {this.renderCourses()}
            </div>
        );
    },
    renderCourses() {
        var {trainingHistory} = this.props;

        if(!trainingHistory) {
            return <Loader/>;
        }

        var courses = trainingHistory.filter(ii => COURSE_LIST.indexOf(ii.getIn(['course','courseCode'])) !== -1).reverse()

        if(courses.size === 0) {
            return <div className="InfoBox margin margin-top2"> No Face to Face training to display </div>
        }

        return <Table className="margin-top">
            {courses.map(this.renderCourse)}
        </Table>
    },
    renderCourse(course, key) {
        const {
            status,
            commentDetails: {
                commentDate
            },
            course: {
                courseCode,
                workshopName
            }
        } = course.toJS();

        return <tr key={key} className="margin2">
            <td><Link to={`/course/${courseCode}`} className="link">{workshopName}</Link></td>
            <td><span className="t-green">{status}</span></td>
            <td><Time type="date">{commentDate}</Time></td>
        </tr>
    }
});

const autoRequest = AutoRequest(['participantId'], (props) => {
    props.dispatch(participantDashboardRequest({
        participantId: props.participantId || UserStore.get('participantId')
    }));
});

const connectWithTrainingHistory = connect(state => ({
    trainingHistory: state.participant
        .getIn(['dashboard','trainingHistory'])
}));

export default connectWithTrainingHistory(autoRequest(ProductLearningPlanFaceToFace));