import React from 'react';
import {RouteHandler} from 'react-router';
import Carousel from 'trc-client-core/src/components/Carousel';
import DepartmentPage from 'trc-client-core/src/components/DepartmentPage';
import IconList from 'trc-client-core/src/components/IconList';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import {fromHexCode} from 'trc-client-core/src/utils/Strings';
import LearningPlanListCurrentParticipant from 'trc-client-core/src/learningPlan/LearningPlanListCurrentParticipant';
import Permissions from 'trc-client-core/src/user/Permissions';
import {STATIC_ASSETS} from 'trc-client-core/src/constants/url';

import {TNT_1} from 'trc-client-core/src/media/CarouselContent';

import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';

var ToyotaNetworkTraining = React.createClass({
    displayName: 'ToyotaNetworkTraining',
    statics: {
        willTransitionTo: function (transition) {
            var permTest;
            switch (transition.path) {
                default:
                    permTest = Permissions.get('CLIENT_APPROVAL');
            }

            if(!permTest) {
                transition.redirect('Unauthorized');
            }
        }
    },
    render() {
        return (
            <div>
                {this.renderCarousel()}
                <Grid>
                    <Col width={3}>
                        {this.renderSideBar()}
                    </Col>
                    <Col>
                        <h1>Toyota Network Training - Apprentice Program</h1>
                        {this.props.children}
                    </Col>
                </Grid>
            </div>


        );
    },
    renderSideBar() {
        var icons = {
            book: fromHexCode('e043'),
            pdf: fromHexCode('E022')
        };
        return (
            <div>
                <img className="row" src={`${STATIC_ASSETS}img/content/logo/TNT.png`} alt="" width="100%"/>
                <IconList>
                    <LearningPlanListCurrentParticipant />
                </IconList>
                <IconList modifier="grandchild">
                    <IconListItem label="true">Resources</IconListItem>
                    <IconListItem icon={icons.book} to="/technical/toyota-network-training">What Is Toyota Network Training?</IconListItem>
                    <IconListItem icon={icons.book} to="/technical/toyota-network-training/information">Toyota Network Training Info</IconListItem>
                    <IconListItem icon={icons.book} to="/technical/toyota-network-training/workplace-mentor-program">Workplace Mentor Program</IconListItem>
                    <IconListItem icon={icons.pdf} href={`${STATIC_ASSETS}docs/toyota-apprenticeship-program.pdf`}>Toyota Apprenticeship Program</IconListItem>
                    <IconListItem icon={icons.pdf} href={`${STATIC_ASSETS}docs/dealership-registration-form.pdf`}>Dealership Registration Form</IconListItem>
                </IconList>
            </div>
        );
    },
    renderCarousel() {
        return (
            <Carousel modifier="hero">
                {TNT_1}
            </Carousel>
        );
    }
});

export default ToyotaNetworkTraining;