import React from 'react';
import {State} from 'react-router';
import IconList from 'trc-client-core/src/components/IconList';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import RouteIsActive from 'trc-client-core/src/components/RouteIsActive';
import {fromHexCode} from 'trc-client-core/src/utils/Strings';
import {STATIC_ASSETS} from 'trc-client-core/src/constants/url';
import DepartmentSidebarDefault from 'trc-client-core/src/components/DepartmentSidebarDefault';

var ManagementSidebar = React.createClass({
    displayName: 'ManagementSidebar',
    mixins: [State],
    render() {
        var IconListGrandChild = React.createFactory(IconList).bind(null, {modifier: 'grandchild'});
        const MFP_FLYERS = `${STATIC_ASSETS}docs/management/certIV/`;
        
        return (
            <DepartmentSidebarDefault department="management">
                <ul className="IconList IconList-management">

                    <IconListItem to="/management/qualification" icon={fromHexCode('E333')} children="Management Qualification" />
                    <RouteIsActive path="/management/qualification" component="li">
                        <IconList modifier="child">

                            <IconListItem icon={fromHexCode('E319')} to="/management/qualification/MFP">MFP</IconListItem>
                            <RouteIsActive path="/management/qualification/MFP" component={IconListGrandChild}>
                                <IconListItem icon={fromHexCode('E022')} href={`${STATIC_ASSETS}docs/management/ManagementFoundationsProgram.pdf`}>Course Flyer</IconListItem>
                                <li className="IconList_label">Assessment Tasks</li>
                                <IconListItem icon={fromHexCode('270f')} href={`${MFP_FLYERS}LeadingTeamsv4.doc`}>Leading Teams v4</IconListItem>
                                <IconListItem icon={fromHexCode('270f')} href={`${MFP_FLYERS}LeadingTheBusinessv3.doc`}>Leading The Business v3</IconListItem>
                                <IconListItem icon={fromHexCode('270f')} href={`${MFP_FLYERS}ImprovingCustomerExperience.doc`}>Improving Customer Experience</IconListItem>
                                <IconListItem icon={fromHexCode('270f')} href={`${MFP_FLYERS}LeadingASafeWorkplacev2.doc`}>Leading A Safe Workforce v2</IconListItem>
                            </RouteIsActive>

                            <IconListItem icon={fromHexCode('E319')} to="/management/qualification/FDLP">FDLP</IconListItem>
                            <RouteIsActive path="/management/qualification/FDLP" component={IconListGrandChild}>
                                <IconListItem icon={fromHexCode('E022')} href={`${STATIC_ASSETS}docs/management/FutureDealerLeadersProgram.pdf`}>Course Flyer</IconListItem>
                            </RouteIsActive>

                        </IconList>
                    </RouteIsActive>

                    <IconListItem to="/management/managers-toolbox" icon={fromHexCode('E281')} children="Manager's Toolbox" />
                    <RouteIsActive path="/management/managers-toolbox" component="li">
                        <IconList modifier="child">

                            <IconListItem icon={fromHexCode('E281')} to="/management/managers-toolbox/engage">Engage</IconListItem>
                            <RouteIsActive path="/management/managers-toolbox/engage" component={IconListGrandChild}>
                                <IconListItem to="/management/managers-toolbox/engage">Employee Engagement</IconListItem>
                                <IconListItem to="/management/managers-toolbox/engage/the-survey">The Survey</IconListItem>
                                <IconListItem to="/management/managers-toolbox/engage/reward-and-recognise">Reward and Recognise</IconListItem>
                            </RouteIsActive>

                            <IconListItem icon={fromHexCode('2693')} to="/management/managers-toolbox/resource">Resource</IconListItem>
                            <RouteIsActive path="/management/managers-toolbox/resource" component={IconListGrandChild}>
                                <IconListItem to="/management/managers-toolbox/resource">Policies & Procedures</IconListItem>
                                <IconListItem to="/management/managers-toolbox/resource/career-development">Career Development</IconListItem>
                                <IconListItem to="/management/managers-toolbox/resource/templates">Templates</IconListItem>
                                <IconListItem to="/management/managers-toolbox/resource/position-descriptions">Position Descriptions</IconListItem>
                                <IconListItem to="/management/managers-toolbox/resource/interview-guides">Interview Guides</IconListItem>
                                <IconListItem to="/management/managers-toolbox/resource/useful-links">Useful Links</IconListItem>
                            </RouteIsActive>

                        </IconList>
                    </RouteIsActive>

                </ul>
            </DepartmentSidebarDefault>
        );
    }
});

module.exports = ManagementSidebar;