import React from 'react';
import Moment from 'moment';
import _ from 'lodash';

import Course from '../mixins/CourseMixin.jsx';
import User from '../user/UserStore';
import EnrollmentFormSingle from '../components/ErollmentFormSingle.jsx';
import Vimeo from '../components/Vimeo';
import Markdown from 'trc-client-core/src/components/Markdown';

var TechnicalCourseModal = React.createClass({
    onEnrol: function () {
        this.refs.form.submit();
    },
    render: function() {
        var course = this.props.course;
        return (
            <div>
                <div className="modal_title">{course.workshopName}</div>
                <div className="modal_body">
                    {this.renderCourseOverview()}
                    <Markdown html={course.additionalResources}/>
                    {this.renderTrainingHistory()}
                    {this.renderEnrollmentOptions()}
                    {this.renderButtons()}
                </div>
            </div>
        );
    },

    // Course Overview
    //

    renderCourseOverview: function(){
        if(this.props.dataset.jstype === "eLearning" && this.props.course.courseCode === "T003"){
            return (
                <div>
                    <Vimeo vimeoID="111820336"></Vimeo>
                    <p> Above is a non-interactive version of the eLearning module to aid you in answering the Hybrid Exam. Feel free to pause at any time to review the content in detail. </p>
                    <p> If you wish to keep the video open whilst completing the exam, right click Go To Exam and open the page on a new tab. </p>
                </div>
            );
        }
        return <Markdown html={this.props.course.overview}/>;

    },

    // Training History
    //
    renderTrainingHistory: function () {
        var pd = this.props.participantData;
        var registration = pd.registration;

        var alreadyCompleted;
        var registrationStatus;
        if(this.props.process) {
            alreadyCompleted = this.renderSoItemString(this.props.process, this.props.completeDate);
        }

        if(pd.registration) {
            registrationStatus = this.renderSoItemString(pd.registration.registrationProcess, pd.registration.soData.soStartDate);
        }

        if(this.props.completed || registration) {
            return <div className="Widget Widget-basic column-flush2 padding-column2 row">
                <div className="gamma p">Training Activity Summary</div>
                {registrationStatus}
                {alreadyCompleted}
            </div>;
        }
    },
    renderSoItemString: function (status, date) {
        return <div>{Course.getPrettyStatus(status)} - {Moment(date).format('MMMM Do YYYY')}</div>;
    },

    // Erollment Options
    //
    renderEnrollmentOptions: function () {
        // Filter Out Non Admin Users
        if (User.isnt('ROLE_MANAGER')) {
            return null;
        }

        // Inelligible Message
        if(this.props.dataset.status === 'Ineligible') {
            return <p className="InfoBox row">Unfortunately, {this.props.participantData.firstName} is not yet eligible to be enrolled into this course as they have not completed the pre-requisites. If you believe this information to be incorrect, please consult with your Regional Technical Training Manager.</p>;
        }

        return <form ref="form" method="post" action={"/technical/registration?code=" + this.props.course.courseCode}>
            <EnrollmentFormSingle
                person={this.props.participantData}
                courseData={this.props}
                name="ENROLL"
                onChange={this.onChange}
            />
        </form>;
    },

    // Buttons
    //
    renderButtons: function () {
        var course = this.props.course;

        // Course Details
        var courseDetails;
        if(course.courseIcon !== 'ST' && this.props.dataset.jstype !== 'exam') {
            courseDetails = <a href={"/#/course/" + course.courseCode} className="Button Button-clear inline margin-top" data-js="close">Course Details</a>;
        }

        // Button Bar
        return <div className="right">
            {courseDetails}

            <div className="ButtonBar right margin-top">
                <a className="Button" data-js="close">Close</a>
                {this.renderButtonAction(course)}
            </div>

        </div>;
    },


    renderButtonAction: function (course) {
        var button;
        // No Buttons for Ineligible courses.
        if(this.props.dataset.status === 'Ineligible'){
            return null;
        }

        // The Default Button is to register interest
        if(!_.contains(course.allTags, 'E_LEARNING')) {
            button = <a className="Button" href={"/technical/makeRequest?courseCode=" + course.courseCode}>Register Interest</a>;
        }

        // The user can only see enrol if they are both admin and there are courses
        if(this.props.soItems.length && User.is('ROLE_MANAGER')) {
            button = <a className="Button" onClick={this.onEnrol}>Enrol</a>;
        }

        // console.log(this.props.dataset, _.contains(course.allTags, 'QUIZ'), course.allTags);
        //
        if(this.props.dataset.jstype === 'exam') {
            if(_.contains(course.allTags, 'QUIZ')) {
                button = <a className="Button" href={"/technical/assessment/quiz/" + course.courseCode}>Go To Exam</a>;
            }

            if(_.contains(course.allTags, 'E_LEARNING')) {
                button = <a className="Button" href={course.moduleLinkUrl}>Go To Exam</a>;
            }
        }



        if(this.props.dataset.jstype === "eLearning" && this.props.course.courseCode === "T003") {
            button = <a className="Button" href={"/technical/assessment/quiz/" + course.courseCode}>Go To Exam</a>;
        }

        return button;
    }
});

module.exports = TechnicalCourseModal;