import React from 'react';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Icon from 'trc-client-core/src/components/Icon';
import Loader from 'trc-client-core/src/components/Loader';
import {Link} from 'react-router';
import {fromJS, Map} from 'immutable';
import Auth from 'trc-client-core/src/components/Auth';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import CourseGroupActivityModal from 'trc-client-core/src/components/CourseGroupActivityModal';
import CourseActivityModal from 'trc-client-core/src/course/CourseActivityModal';
import UserStore from 'trc-client-core/src/user/UserStore';
import ParticipantList from 'trc-client-core/src/participant/ParticipantList';
import {ATTENDED, COMPLETED, CREDIT} from 'trc-client-core/src/constants/CourseStatus';

import {IconTechnical} from 'trc-client-core/src/components/Icons';

function fourCourse(code) {
    return [`${code}_PRE_READ`, `${code}_PRE_EXAM`, `${code}_ILT`, `${code}_EXAM`];
}

const COURSE_LIST_MAP = {
    'T21-STWE': fourCourse('T21-STWE'),
    'T21-STWWN': fourCourse('T21-STWWN'),
    'T21-STFOS': fourCourse('T21-STFOS'),
    'T21-STSO': fourCourse('T21-STSO'),
    'T21-STCHS': fourCourse('T21-STCHS'),
    'T21-STENS': fourCourse('T21-STENS'),
    'T21-STDLS': fourCourse('T21-STDLS'),
    'T21-PTFOR': fourCourse('T21-PTFOR'),
    'T21-PTEL_EF': fourCourse('T21-PTEL_EF'),
    'T21-PTEL_SR': fourCourse('T21-PTEL_SR'),
    'T21-PTEL_HVAC': fourCourse('T21-PTEL_HVAC'),
    'T21-PTCH_BR': fourCourse('T21-PTCH_BR'),
    'T21-PTCH_SS': fourCourse('T21-PTCH_SS'),
    'T21-PTEN_MEC': fourCourse('T21-PTEN_MEC'),
    'T21-PTEN_MAN': fourCourse('T21-PTEN_MAN'),
    'T21-PTCH_MT': fourCourse('T21-PTCH_MT'),
    'T21-PTCH_AT': fourCourse('T21-PTCH_AT'),
    'T21-PTCH_FDR': fourCourse('T21-PTCH_FDR')
}

function Segment(props) {
    var marginBottom = (props.modifier !== "ServiceTechnician") ? 'margin-bottom' : '';
    return <div className={`margin-row3`}>
        {props.title ? <div className={`Bar Bar-${props.modifier} ${marginBottom}`}>{props.title}</div> : null}
        {props.children}
    </div>
}

function Heading(props) {
    return <strong className="t-center block padding">{props.children}</strong>
}

var TechnicalLearningPlan = React.createClass({
    displayName: 'TechnicalLearningPlan',
    onClickCourse(courseCode) {
        var courseMap = this.getCourseMap();
        var {firstName} = this.props.participant.toObject();
        var participantId = this.props.location.query.participantId || UserStore.get('participantId');
         if (COURSE_LIST_MAP[courseCode]) {
            ModalManager.showModal(<CourseGroupActivityModal
                name={firstName}
                course={fromJS(courseMap[courseCode])}
                courses={fromJS(COURSE_LIST_MAP[courseCode].map(ii => courseMap[ii]))}
            />);
        } else {
            ModalManager.showModal(<CourseActivityModal courseCode={courseCode} participantId={participantId} />);
        }
    },
    getPathwayCompletion() {
        if(this.props.learningPlan) {
            return this.props.learningPlan.getIn(['pathwayCompletion', 0]);
        }

        return Map();
    },
    getCourseMap() {
        return this.props.learningPlan.getIn(['pathwayCompletion', 0, 'gapData'])
            .reduce((rr, ii) => rr.set(ii.get('courseCode'), ii), Map())
            .toJS();
    },
    renderCourse(props) {
        var eligible = props.eligible;
        var size = props.size || 'tight';
        var {workshopName} = props;
        var type;
        var ribbon;
        var ribbonClass;

        switch (props.completionProcess){
            case "ENROLL":
                ribbonClass = 'Card-ribbon';
                ribbon = <span className="Card_ribbon">Enrolled</span>;
                type = props.stream;
                break;
            case "WAITLIST":
                ribbonClass = 'Card-ribbon';
                ribbon = <span className="Card_ribbon">Waitlisted</span>;
                type = props.stream;
                break;
            case ATTENDED:
            case COMPLETED:
            case CREDIT:
                ribbonClass = 'Card-ribbon';
                ribbon = <span className="Card_ribbon">Completed</span>;
                type = props.stream;
                break;
        }

        if(props.completed){
            ribbonClass = 'Card-ribbon';
            ribbon = <span className="Card_ribbon">Completed</span>;
            type = props.stream;
        }

        if (eligible) {
            type = props.stream;
        }

        return <a
            onClick={props.onClick || this.onClickCourse.bind(null, props.courseCode)}
            style={{height: 120, ...props.style}}
            className={`Card Card-${size} Card-${type} ${ribbonClass} ${props.className} margin-bottom`}>
            {workshopName && workshopName.replace(props.replace, '') || props.children}
            {ribbon}
        </a>;
    },
    renderCertification(props) {
        return <this.renderCourse
            stream={props.stream}
            courseCode={props.courseCode}
            completionProcess={props.completionProcess}
            size="normal"
            style={{height:'auto', ...props.style}}>
                <div style={{maxWidth: 230, margin: 'auto'}}>
                    <Icon hexCode="E075" modifier="large" className="right"/>
                    {props.workshopName || props.children}
                </div>
        </this.renderCourse>
    },
    render() {
        var {learningPlan, participant} = this.props;

        if(!learningPlan) {
            return <Loader/>;
        }
        var courseMap = this.getCourseMap();
        var Course = this.renderCourse;
        var Certification = this.renderCertification;

        function STCourse(code) {
            return <Col>
                <Course {...courseMap[code]} stream="technicalService" replace="ST "/>
            </Col>;
        }

        function PTCourse(code) {
            return <Course {...courseMap[code]} stream="technicalPro" replace="PT "/>;
        }

        function DTCourse(code, props) {
            return <Course {...props} {...courseMap[code]} stream="technicalDiagnosis" replace="DT "/>;
        }

        return <div>
            <h1>
                <span className="t-capitalize">{learningPlan.get('displayName')}</span>
                <div className="t-muted">{`${participant.get('firstName')} ${participant.get('lastName')} `}</div>
            </h1>

            <Segment modifier="ServiceTechnician" title="Service Technician">
                <Grid>
                <Col width={3}>
                    <Heading>Optional</Heading>
                    <Grid modifier="tighter">
                        <Col>
                            {STCourse('T21-STWE')}
                        </Col>
                        <Col>
                            {STCourse('T21-STWWN')}
                        </Col>
                    </Grid>
                </Col>
                <Col>
                    <Heading>{String.fromCharCode(160)}</Heading>
                    <Grid modifier="tighter">
                        <Col>
                            {STCourse('T21-STFOS')}
                        </Col>
                        <Col>
                            {STCourse('T21-STSO')}
                        </Col>
                        <Col>
                            {STCourse('T21-STCHS')}
                        </Col>
                        <Col>
                            {STCourse('T21-STENS')}
                        </Col>
                        <Col>
                            {STCourse('T21-STDLS')}
                        </Col>
                        <Col>
                            {STCourse('T21-STHYB_SS')}
                        </Col>
                    </Grid>
                </Col>
                </Grid>
                <Certification stream="technicalService" {...courseMap['ST_STC']} />
            </Segment>

            <Segment modifier="ProfessionalTechnician" title="Pro Technician">
                <Grid modifier="tight">
                    <Col width="3">
                        <Heading>{String.fromCharCode(160)}</Heading>
                        {PTCourse("T21-PTFOR")}
                    </Col>
                    <Col width="3">
                        <Heading>Electrical</Heading>
                        {PTCourse("T21-PTEL_EF")}
                        {PTCourse("T21-PTEL_SR")}
                        {PTCourse("T21-PTEL_HVAC")}
                    </Col>
                    <Col width="3">
                        <Heading>Engine</Heading>
                        {PTCourse("T21-PTEN_MEC")}
                        {PTCourse("T21-PTEN_MAN")}
                    </Col>
                    <Col width="6">
                        <Heading>Chassis</Heading>
                        <Grid modifier="tight">
                            <Col>
                                {PTCourse("T21-PTCH_BR")}
                                {PTCourse("T21-PTCH_SS")}
                            </Col>
                            <Col>
                                {PTCourse("T21-PTCH_MT")}
                                {PTCourse("T21-PTCH_AT")}
                                {PTCourse("T21-PTCH_FDR")}
                            </Col>
                        </Grid>
                    </Col>
                </Grid>
                <Certification stream="technicalPro" {...courseMap['PT_PTC']}/>
            </Segment>

            <Segment modifier="DiagnosisTechnician" title="Diagnosis Technician">
                {DTCourse('T21-DTFD1', {
                    className: "margin-column-auto",
                    style: {
                        width: 128
                    }
                })}
                <Grid modifier="tight">
                    <Col width={4}>
                        <Heading>Electrical</Heading>
                        <Grid modifier="tighter">
                            <Col>
                                {DTCourse('T21-DTHYB1')}
                            </Col>
                            <Col>
                                {DTCourse('T21-DTEL1')}
                                {DTCourse('T21-DTEL2')}
                                {DTCourse('T21-DTEL3')}
                                {DTCourse('T21-DTEL4')}
                            </Col>
                        </Grid>
                    </Col>
                    <Col width={4}>
                        <Heading>Engine</Heading>
                        <Grid modifier="tighter">
                            <Col>
                                {DTCourse('T21-DTEN1')}
                            </Col>
                            <Col>
                                {DTCourse('T21-DTEN2')}
                            </Col>
                        </Grid>
                    </Col>
                    <Col width={4}>
                        <Heading>Chassis</Heading>
                        <Grid modifier="tighter">
                            <Col>
                                {DTCourse('T21-DTCH1')}
                                {DTCourse('T21-DTCH2')}
                                {DTCourse('T21-DTCH3')}
                            </Col>
                            <Col>
                                {DTCourse('T21-DTCH4')}
                            </Col>
                        </Grid>
                    </Col>
                </Grid>
                <Grid modifier="tight">
                    <Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_ELC']}/></Col>
                    <Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_ENC']}/></Col>
                    <Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_CHC']}/></Col>
                </Grid>
                <Certification stream="technicalDiagnosis" {...courseMap['DT_SDTC']} />
            </Segment>

            <Segment title="Technical Advisor Professional" modifier="technical">
                <Grid modifier="tight">
                    <Col><Course {...courseMap['MENTOR']}>Mentor Training</Course></Col>
                    <Col><Course {...courseMap['GCS']}>Technical Advisor Training</Course></Col>
                    <Col width="8"/>
                </Grid>
            </Segment>
            <Auth is="ROLE_MANAGER">
                <div>
                    <h2><IconTechnical/> Technical Career Plan <span className="t-muted">Staff List</span></h2>
                    <em className="block">Click on a staff member to view their Technical Career Plan status.</em>
                    <ParticipantList type="technical" className="clearfix margin-row" renderItem={this.renderStaff}/>
                </div>
            </Auth>
        </div>;
    },
    renderStaff(participant, key) {
        var {firstName, lastName, participantId} = participant.toObject();
        return <li key={key} className="w25 left">
            <Link className="t-capitalise" to={`/learning-plan/technical_career_plan`} query={{participantId}}>{firstName} {lastName}</Link>
        </li>
    }
});

export default TechnicalLearningPlan;