import React from 'react';
import classnames from 'classnames';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Time from 'trc-client-core/src/components/Time';
import {Link} from 'react-router';

import Markdown from 'trc-client-core/src/components/Markdown';
import {getStaticAssets} from 'trc-client-core/src/constants/url';

var FDLPSession = React.createClass({
    displayName: 'FDLPSession',
    propTypes: {
        sessions: React.PropTypes.array.isRequired,
        id: React.PropTypes.number
    },
    render: function() {
        var currentSession = this.props.sessions[this.props.currentSession];
        return (
            <div>
                {this.renderSessionsBar(this.props.sessions)}
                <Grid className="row2">
                    <Col width={8}>{this.renderCurrentSession(currentSession)}</Col>
                    <Col width={4}>{this.renderSideBar(currentSession)}</Col>
                </Grid>
            </div>
        );
    },
    renderSessionsBar: function (sessions) {
        var rows = sessions.map(session => {
            var className = classnames('Button w100 t-center', session.tag === 'upcoming' ? 'Button-grey' : `Button-${session.tag}`);
            var button = <Link className={className} to={`/management/fdlp/session/${session.index}`}>{session.sessionId}</Link>;
            if (session.tag === 'not_ready') {
                button = <button className={className} disabled>{session.name}</button>;
            }
            return [
                <td><div className="td-spacer"></div></td>,
                <td>{button}</td>
            ];
        });
        return (
            <table className="margin-top2 margin-bottom3">
                <tbody>
                    <tr>{rows}<td><div className="td-spacer"></div></td></tr>
                </tbody>
            </table>
        );
    },
    renderCurrentSession: function (session) {
        var dates = (session.startDate) ? <em className="t-muted"><Time format="Do MMM">{session.startDate}</Time> - <Time format="Do MMM YYYY">{session.endDate}</Time></em> : '';
        return (
            <div>
                <h1 className="hug">{session.name}</h1>
                <p>{dates}</p>
                <Markdown html={session.description}/>
                {this.renderSessionDetails(session)}
            </div>
        );
    },
    renderSessionDetails: function (session) {
        if(session.index !== 0) {
            var booking = session.booking || 'TBC';
            var venue = session.venue || 'TBC';

            return (
                <div className="Widget margin-top2 margin-bottom2">
                    <Grid>
                        <Col>
                            <strong className="Icon Icon-small Icon-inline Icon-pin">Venue</strong>
                            <Markdown html={venue} styling={false}/>
                        </Col>
                        <Col>
                            <strong className="Icon Icon-small Icon-inline Icon-calendar" >Dates</strong>
                            <p><Time format="Do MMM">{session.startDate}</Time> - <Time format="Do MMM YYYY">{session.endDate}</Time></p>
                        </Col>
                    </Grid>
                    <strong className="Icon Icon-small Icon-inline Icon-qrcode" >Booking Details</strong>
                    <Markdown html={booking} />
                </div>
            );
        }
    },
    renderSideBar: function (session) {
        return (
            <div>
                <img className="row hug-top" src={getStaticAssets("img/content/management/fdlp.jpg")} alt="FDLP" width="100%"/>
                <ul className="IconList IconList-management">
                    <li><a data-icon={String.fromCharCode(57348)} href="/#/management/fdlp/participants">Future Leaders</a></li>
                    <li><a data-icon={String.fromCharCode(57399)} href={getStaticAssets(`docs/management/fdlp/${this.props.group.replace('fdlp_', '')}/fdlp_contact_list.pdf`)} target="_blank">Contact List</a></li>
                </ul>
                {this.renderAssessmentTasks(session)}
                {this.renderDownloads(session)}
            </div>
        );
    },
    renderAssessmentTasks: function (session) {
        if(session.assessmentTasks) {
            return <div className="IconList IconList-management IconList-assessment">
                <h3>Assessment Tasks</h3>
                <Markdown html={session.assessmentTasks} styling={false}/>
            </div>;
        }
    },
    renderDownloads: function (session) {
        if(session.downloads) {
            return <div className="IconList IconList-management IconList-document">
                <h3>Downloads</h3>
                <Markdown html={session.downloads} styling={false}/>
            </div>;
        }
    }
});

module.exports = FDLPSession;