import React from 'react';
import CarouselItem from 'trc-client-core/src/components/CarouselItem';
import Carousel from 'trc-client-core/src/components/Carousel';
import Col from 'trc-client-core/src/components/Col';
import CourseCalendar from 'trc-client-core/src/course/CourseCalendar';
import Grid from 'trc-client-core/src/components/Grid';
import MenuToggleButton from 'trc-client-core/src/components/MenuToggleButton';
import NewsFeed from 'trc-client-core/src/components/NewsFeed';
import QandaFeed from 'trc-client-core/src/qanda/QandaFeed';
import UserStore from 'trc-client-core/src/user/UserStore';
import Auth from 'trc-client-core/src/components/Auth';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import {staticUrl} from 'trc-client-core/src/constants/url';


var ToyotaForLifeHomeView = React.createClass({
    displayName: 'ToyotaForLifeHomeView',
    render: function () {
        var query = (UserStore.is('ROLE_TMCA_INTERNAL')) ? 'course=TFORL' : 'course=STFL&course=TFL&course=TFLIA&course=TFLL&course=TFLDPGM';

        return (
            <div>
                {this.renderCarousel()}
                <Grid>
                    <Col>
                        {this.renderHomeIntroduction()}
                        <NewsFeed filter={['toyotaforlife']} className="margin-bottom"></NewsFeed>
                        <Auth site="TOYOTA">
                            <div className="row">
                                <h2>Q &amp; A</h2>
                                <QandaFeed filter={['Toyota_For_Life']} defaultTag="Toyota_For_Life"></QandaFeed>
                            </div>
                        </Auth>
                        <div className="row" >
                            <h2 >Upcoming Courses</h2>
                            <CourseCalendar queryString={query}/>
                        </div>
                    </Col>
                    <Col width={4}>
                        <ul className="IconList IconList-child ">
                            <MenuToggleButton title="Resources" icon={57669} >
                                <ul className="IconList IconList-child IconList-grandchild">                             
                                    <IconListItem icon={"\uE022"} href={staticUrl('docs/course/TFL/Resource%20Kit.docx')}>Resource Kit</IconListItem>
                                    <IconListItem icon={"\uE022"} href={staticUrl('docs/course/TFL/DP_Pack_combined.pdf')}>DP Pack</IconListItem>
                                    <IconListItem icon={"\uE022"} href={staticUrl('docs/course/TFL/employee-level-training.pdf')}>Employee Level Training</IconListItem>
                                    <IconListItem icon={"\uE060"} href={staticUrl('docs/course/TFL/tfl-elearning-modules.jpg')}>TFL Elearning Modules</IconListItem>
                                </ul>                   
                            </MenuToggleButton>
                        </ul>
                    </Col>
                </Grid>
            </div>
        );
    },
    renderCarousel (){
        return (
            <Carousel delay={7000} modifier="hero">
                <CarouselItem title="Toyota For Life" center image="banner/banner-tflpage@TOYOTA.jpg">
                    <div className="gamma" >Oh What A Feeling!</div>
                </CarouselItem>
                <CarouselItem center image="banner/banner-tflStandard_1@TOYOTA.jpg" />
                <CarouselItem center image="banner/banner-tflStandard_2@TOYOTA.jpg" />
                <CarouselItem center image="banner/banner-tflStandard_3@TOYOTA.jpg" />
                <CarouselItem center image="banner/banner-tflStandard_4@TOYOTA.jpg" />
                <CarouselItem center image="banner/banner-tflStandard_5@TOYOTA.jpg" />
            </Carousel>
        );
    },
    renderHomeIntroduction (){
        return (
            <div className="hug-top row-bottom">
                <h1>Toyota For Life</h1>
                <p>The Toyota For Life program is designed to create a cultural change, bringing to life the "Oh What A Feeling" brand promise that will energise and engage guests to <strong>Start The Toyota For Life Journey!</strong></p>
            </div>
        );
    }
});

module.exports = ToyotaForLifeHomeView;