import React from 'react';
// import _ from 'lodash';
import {State, Navigation} from 'react-router';

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 StreamSelect from 'trc-client-core/src/report//StreamSelect';
import StreamCertificationChart from 'trc-client-core/src/report/StreamCertificationChart';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import InformationModal from 'trc-client-core/src/components/InformationModal';


var StreamCertificationReport = React.createClass({
    displayName: 'StreamCertificationReport',
    mixins: [
        State,
        Navigation
    ],
    onShowLegend: function () {
        ModalManager.showModal(InformationModal, {
            title: 'Stream Certification',
            children: this.renderLegend()
        });
    },
    render: function () {       
        var {certCode} = this.props.location.query;
        return <div>
            <h1>Stream Certifications <Icon name="circleinfo" onClick={this.onShowLegend}></Icon></h1>
            <Grid>
                <Col width={3}>
                    <StreamSelect name="certCode" value={certCode} />
                </Col>
                <Col></Col>
            </Grid>
            <StreamCertificationChart certCode={certCode}/>
        </div>;
    },
    renderLegend: function () {
        return (
            <div className="Typography">
                <p>The Stream Certification Report is generated using the following details.</p>                 
                <p>All the certification course codes to be found in:</p>
                <ul>
                    <li>Pro Tech</li>
                    <li>Service Tech</li>
                    <li>Diagnosis Tech</li>
                    <li>Master Tech</li>
                </ul>
                <p>Staff to be included in the report will be:</p>
                <ul>
                    <li><code>6425 - Apprentice</code></li>
                    <li><code>6601 - Technician</code></li>
                    <li><code>6347 - Workshop Foreman</code></li>
                    <li><code>6421 - Diagnosis Master Technician</code></li>
                    <li><code>6320 - Road Tester</code></li>
                </ul>
                <p>Eligibility determined via logic:</p>
                <ul>
                    <li>If a user does not have ST, they are eligible for ST.</li>
                    <li>If a user has ST but not PT, they are eligible for PT.</li>
                    <li>If a user has PT but not all four DT certs, they are eligible for them. It will calculate no. of eligibles for each cert.</li>
                    <li>If a user has all four DTs, they are eligible for MT.</li>
                </ul>
                <p>Benchmarks:</p>
                <ul>
                    <li>100% of Staff to be ST Certified</li>
                    <li>50% of Staff to be PT Certified</li>
                    <li>30% of Staff to be DT Certified in at least one Stream</li>
                    <li>10% of Staff to be MT Certified</li>
                </ul>
                <p><em>NB: To best display the 10% Benchmark of Certifications the MT chart has been 'zoomed in'; the full data is displayed in the table below the chart.</em></p>
            </div>
        );
    }
});

module.exports = StreamCertificationReport;