import React from 'react';
import moment from 'moment';
import Video from 'trc-client-core/src/components/Video';

var videos = [
    {id: '161143768',    releaseDate: '2015-01-01'},
    {id: '132276058',    releaseDate: '2015-07-01'},
    {id: '132276059',    releaseDate: '2015-07-01'},
    {id: '132276060',    releaseDate: '2015-08-01'},
    {id: '132276061',    releaseDate: '2015-08-01'},
    {id: '132276062',    releaseDate: '2015-09-01'},
    {id: '132277442',    releaseDate: '2015-09-01'},

    {id: '132281366',    releaseDate: '2015-10-01'},
    {id: '132281342',    releaseDate: '2015-10-01'},
    {id: '132281339',    releaseDate: '2015-11-01'},
    {id: '132281335',    releaseDate: '2015-11-01'},
    {id: '132281332',    releaseDate: '2016-02-01'},

    {id: '132281906',    releaseDate: '2016-02-01'},
    {id: '132281908',    releaseDate: '2016-03-01'},
    {id: '132281910',    releaseDate: '2016-03-01'},
    {id: '132281913',    releaseDate: '2016-04-01'},
    {id: '132281914',    releaseDate: '2016-04-01'},
    {id: '132281918',    releaseDate: '2016-05-01'},
    {id: '132281923',    releaseDate: '2016-05-01'},
    {id: '132281925',    releaseDate: '2016-06-01'},
    {id: '132281927',    releaseDate: '2016-06-01'}
];

var TechnicalVideoView = React.createClass({
    displayName: 'TechnicalVideoView',
    render() {
        return (
            <div>
                <h1>Technical Training Videos</h1>
                <p>Welcome to the Technical Training Video Gallery, this area will provide you with a wide range of information on products and features; adding to the expanding amount of resources and support material available for Service staff on the TRC. Please continue to monitor this area as new videos will be made available regularly.</p>

                <div className="margin-top2">
                    {this.renderVideos()}
                </div>
            </div>
        );
    },
    renderVideos() {
        return videos.map((video, key) => {
            var releaseDate = moment(video.releaseDate, 'YYYY-MM-DD');
            var today = moment();

            var props = {
                key: key,
                id: video.id,
                type: 'list' 
            };

            if(releaseDate.isAfter(today)) {
                props.className = 'is-disabled pointer';
                props.link = false;
                props.disabled = true;
            } else if (releaseDate.isSame(today, 'month')) {
                props.ribbon = 'New';
            }

            return <Video {...props}/>;
        });
    }
});

module.exports = TechnicalVideoView;