import React from 'react';
import {Link} from 'react-router';

import {STATIC_ASSETS} from 'trc-client-core/src/constants/url';
import Toggle from 'trc-client-core/src/components/Toggle';
import Auth from 'trc-client-core/src/components/Auth';
import IconList from 'trc-client-core/src/components/IconList';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import TechnicalTrainersList from 'trc-client-core/src/technical/TechnicalTrainersList';
import TechnicalStaffWidget from 'trc-client-core/src/components/TechnicalStaffWidget';
import LearningPlanListCurrentParticipant from 'trc-client-core/src/learningPlan/LearningPlanListCurrentParticipant';
import {fromHexCode} from 'trc-client-core/src/utils/Strings';


class TechnicalSidebar extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'TechnicalSidebar';
    }
    render() {
        return <div>
            <a className="block margin-bottom" href="http://lms.toyota.com.au/plateau/user/deeplink.do?linkId=SCHEDULED_OFFERING_DETAILS&scheduleID=22022" target="blank">
                <img src={`${STATIC_ASSETS}img/site/tech/master_tech.png`} width="100%"/>
            </a>
            <Link className="block margin-bottom" to="/technical/fixitright">
                <img src={`${STATIC_ASSETS}img/content/technical/fixitright/logo.png`} width="100%" alt="" />
            </Link>

            <IconList modifier="grandchild">
                <IconListItem icon={"\uE055"} to="/technical">Department Page</IconListItem>
                <Auth site="TOYOTA">
                    <IconListItem icon={fromHexCode('e271')} to="/service/warranty">Warranty</IconListItem>
                </Auth>
                <IconListItem icon={"\uE012"} to="/technical/available_training">Technical Courses</IconListItem>
                <IconListItem icon={"\uE009"} to="/technical/videos">Technical Videos</IconListItem>
                <Auth perm="GAPREPORT_TECHNICAL">
                    <IconListItem to="/gapreport/technical_overview" icon={"\uE084"} params={{pathwayId: 'technical_overview'}}>Gap Report</IconListItem>
                </Auth>
                <LearningPlanListCurrentParticipant filter={['technical_career_plan']}/>
            </IconList>

            <Toggle
                defaultActive={false}
                button={<h3 className="Toggle Toggle-alt">Tech Trainers</h3>}
                activeButton={<h3 className="Toggle Toggle-alt is-active">Tech Trainers</h3>}
            >
                <TechnicalTrainersList/>
            </Toggle>

            <Auth is="ROLE_TECH_MANAGER">
                <Toggle
                    defaultActive={false}
                    button={<h3 className="Toggle Toggle-alt">Career Plan Staff List</h3>}
                    activeButton={<h3 className="Toggle Toggle-alt is-active">Career Plan Staff List</h3>}
                >
                    <TechnicalStaffWidget type="list"/>
                </Toggle>
            </Auth>

            <a className="block margin-bottom" href={`${STATIC_ASSETS}docs/prius/NGPrius2016TechAdvisorOnline_V2.pps`}>
                <img src={`${STATIC_ASSETS}img/content/technical/prius_tech_advisor.jpg`} width="100%" alt="" />
                Prius Technical Advisor Presentation
            </a>

            <a className="block margin-bottom" href={`${STATIC_ASSETS}docs/prius/NGPrius2016TechAdvisorToyotaSafetySenseOnline_.pps`}>
                <img src={`${STATIC_ASSETS}img/content/technical/prius_safety.jpg`} width="100%" alt="" />
                Prius Safety Presentation
            </a>


        </div>;
    }
}

export default TechnicalSidebar;