import React from 'react';
import {Link} from 'react-router';
import ToyotaLinkNavView from 'trc-client-core/src/product/ToyotaLinkNavView';
import ToyotaLinkQandaSidebarView from 'trc-client-core/src/product/ToyotaLinkQandaSidebarView';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ProductPathwayModal from 'trc-client-core/src/product/ProductPathwayModal';
import VehicleDisclaimerModal from 'trc-client-core/src/product/VehicleDisclaimerModal';

var ToyotaLinkSidebarView = React.createClass({
    displayName: 'ToyotaLinkSidebarView',
    onShowVideo(){
        ModalManager.showModal(ProductPathwayModal, {});
    },
    onShowVehicle(ee){
        ModalManager.showModal(VehicleDisclaimerModal, {vehicle: ee});
    },
    render() {
        return (
            <div>
                <ul className="IconList IconList-product IconList-child ">
                    <ToyotaLinkNavView title="Vehicles" icon={57350} >
                        <div>
                            <ul className="IconList IconList-child IconList-grandchild">
                                <li className="IconList_label">Vehicles Index</li>                              
                                <li><a onClick={this.onShowVehicle.bind(this, 'Aurion')} >Aurion</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Camry')} >Camry</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Corolla Hatch')} >Corolla Hatchback</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Corolla Sedan')} >Corolla Sedan</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Fortuner')} >Fortuner</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'HiLux')} >HiLux</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Kluger')} >Kluger</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Prado')} >Prado</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Prius c')} >Prius c</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'RAV4')} >RAV4</a></li>
                                <li><a onClick={this.onShowVehicle.bind(this, 'Yaris Hatch')} >Yaris Hatch </a></li>
                            </ul>                   
                        </div>
                    </ToyotaLinkNavView>
                    <ToyotaLinkNavView title="Resources" icon={57669} >
                        <div>
                           <ul className="IconList IconList-child IconList-grandchild">
                               <li className="IconList_label">Fact Sheets </li>  
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Fact-DestinationDownload.pdf">Destination Download</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Fact-Fuel.pdf">Fuel Finder</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Fact-LocalSearch.pdf">Local Search</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Fact-ToyotaHelp.pdf">Toyota Help</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Fact-Weather.pdf">Weather</a></li>
                               <li className="IconList_label">Guides</li>  
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Guide-DashboardDemonstration.pdf">Dashboard Demonstration</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Guide-ReferenceGuide.pdf">Reference Guide</a></li>
                               <li><a data-icon={String.fromCharCode(57378)} href="//static.toyotainstituteaustralia.com.au/docs/product/toyotalink/resources/Guide-ToyotaLinkInteractiveGuide.pdf">Toyota Link Interactive Guide</a></li>
                           </ul>                   
                       </div>
                    </ToyotaLinkNavView>
                    <ToyotaLinkNavView title="Videos" icon={57729} >
                       <div>
                           <ul className="IconList IconList-child  IconList-grandchild">                             
                               <li><Link to="/product/toyotalink/videos/about">About</Link></li>
                               <li><a className="Link-new" href="/#/product/toyotalink/videos/instructional">Instructional</a></li>
                               <li><Link to="/product/toyotalink/videos/destinationdownload">Destination Downloads</Link></li>
                               <li><Link to="/product/toyotalink/videos/localsearch">Local Search</Link></li>
                               <li><Link to="/product/toyotalink/videos/fuelfinder">Fuel Finder</Link></li>
                               <li><Link to="/product/toyotalink/videos/weather">Weather</Link></li>
                               <li><Link to="/product/toyotalink/videos/toyotahelp">Toyota Help</Link></li>
                               <li><Link className="Link-new" to="/product/toyotalink/videos/pandora">Pandora</Link></li>
                           </ul>                   
                       </div>
                    </ToyotaLinkNavView>
                    <ToyotaLinkNavView title="FAQ" icon={57458} >
                        <div>
                           <ul className="IconList IconList-child  IconList-grandchild">                               
                               <li><Link to="/product/toyotalink/faq/sect1" title="About Toyota Link">About Toyota Link</Link></li>
                               <li><Link to="/product/toyotalink/faq/sect2" title="Setting Up Toyota Link?">Setting Up Toyota Link</Link></li>
                               <li><Link to="/product/toyotalink/faq/sect3" title="Register Online">Register Online</Link></li>
                               <li><Link to="/product/toyotalink/faq/sect4" title="Downloading The App">Downloading The App</Link></li>
                               <li><Link to="/product/toyotalink/faq/sect6" title="Troubleshooting">Troubleshooting</Link></li>
                           </ul>                   
                       </div>
                    </ToyotaLinkNavView>
                </ul>
                <ul className="IconList IconList-child IconList-product ">
                    <li><a href="https://toyotamanuals.com.au/bluetoothguide" target="_blank" title="Toyota Bluetooth Compatibility Guide" data-icon={String.fromCharCode(57425)}>Toyota Bluetooth Compatibility Guide</a></li>
                </ul>
                <ToyotaLinkQandaSidebarView />
            </div>
        );
    }
});

module.exports = ToyotaLinkSidebarView;