var React = require('react');
var UserStore = require('trc-client-core/src/user/UserStore');
var PathwayStore = require('trc-client-core/src/course/PathwayStore.js');
var Loader = require('trc-client-core/src/components/Loader');
var ModalManager = require('../Modal/ModalManager');
var ProductPathwayModal = require('./ProductPathwayModal');

var ToyotaLinkMainVideoView = React.createClass({
    displayName: 'ToyotaLinkMainVideoView',
    updateHash: true,
    propTypes: {
        participantId: React.PropTypes.string.isRequired,
        pathwayId: React.PropTypes.string.isRequired
    },
    getInitialState: function(){
        return {
            userId : UserStore.get('participantId'),
            productPlan : null  
        };
    },
    componentDidMount: function () {
        this.getData();
    },
    getData: function () {
        PathwayStore.productPathway({id: this.props.pathwayId}).then(
            (data) => this.setState({
                productPlan: data
            })
        );
    },
    onShowModal: function (){
        var _pathway = this.state.productPlan.pathway;
        var coursePath = _pathway.trainingVideoCourse;
        var infoMap = this.state.productPlan.completionInfoMap;
        var status = infoMap[_pathway.trainingVideoCourse.courseCode];
        var _props = ({
            pathway : coursePath,
            completion: status,
            participantId: this.props.participantId,
            courseType : "trainingvideo"
        });
        ModalManager.showModal(ProductPathwayModal, _props);
    },
    render: function () {
        if(this.state.userId !== ""){
            if(!this.state.productPlan){
                return <Loader></Loader>;
            }
            return this.renderMainVideo(); 
        } else {
            return <em className="InfoBox">You do not have permission to view this content.</em>;
        }
    },
    renderMainVideo(){
        var _pathway = this.state.productPlan.pathway;
        if(_pathway.trainingVideoCourse){
             return (
                 <div >
                     <h2>Driver Aids & Infotainment</h2>
                     <a onClick={this.onShowModal} ><img src="//static.toyotainstituteaustralia.com.au/img/content/product/toyota_link/tl_thumb.jpg" width="625px"/></a>
                     <div className="push-top row">
                         This video will provide you with the confidence to sell Toyota Link as a value-adding feature of the Toyota vehicles on your showroom floor (those installed with Toyota Link).
                     </div>
                 </div>
             );  
        } 
    }

});

module.exports = ToyotaLinkMainVideoView;