import React from 'react';
import Carousel from 'trc-client-core/src/components/Carousel';
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 {STATIC_ASSETS, SOURCE} from 'trc-client-core/src/constants/url';

export default function TSSCarousel() {
    var icons = {
        monitor: fromHexCode('e029'),
        pdf: fromHexCode('E022'),
        link: fromHexCode('e144')
    };
    return (
        <div>
            <img className="row" src={`${STATIC_ASSETS}img/content/logo/TSS_logo.jpg`} width="100%"/>
            <IconList>
                <LearningPlanListCurrentParticipant />
            </IconList>
            <IconList modifier="grandchild">
                <IconListItem label="true">ELEARNING MODULES</IconListItem>
                <IconListItem to="/course/SPK22078" icon={icons.monitor}>Introduction to the TSS</IconListItem>
                <IconListItem to="/course/SPK22086" icon={icons.monitor}>Getting Started with TSS</IconListItem>
                <IconListItem label="true">User Guides</IconListItem>
                <IconListItem href={`${STATIC_ASSETS}docs/tss/Toyota-DealerTechnician-CasesQRG.pdf`}  icon={icons.pdf}>Create A General Case</IconListItem>
                <IconListItem href={`${STATIC_ASSETS}docs/tss/Toyota-DealerTechnician-SearchingQRG.pdf`}  icon={icons.pdf}>How To Search TSS</IconListItem>
                <IconListItem label="true">Links</IconListItem>
                <IconListItem href={SOURCE} icon={icons.link}>Toyota Source</IconListItem>
            </IconList>
        </div>
    );
};