var React = require('react');
var _ = require('lodash');
var URL = require('../../constants/url');

var PARTICIPANTS = {
    fdlp_group_7: require('./data/session7Participants.js'),
    fdlp_group_8: require('./data/session8Participants.js'),
    fdlp_group_9: require('./data/session9Participants.js')
};

var FDLPParticipants = React.createClass({
    displayName: 'FDLPParticipants',
    render: function() {
        return (
            <div>  
                <a href="/#/management/fdlp" className="cta-back">back</a>
                <div className="grid">
                    <div className="col--8">
                        <div className="Media l-row">
                            <img className="Media_image" src={URL.getStaticAssets("img/fdlp/avatar/Carolyn.Wong.jpg")} alt="" width="64" height="64"/>
                            <div className="Media_body">
                                <div className="t-capitalize">Carolyn Wong</div>
                                <strong>Toyota Institute Australia - Training Development Manager</strong>
                                <div>Franchise Development &amp; Regional Operations Division</div>
                                <div><em>Toyota Motor Corporation Australia</em></div>
                                <a className="readmore" href="mailto:carolyn.wong@toyota.com.au">carolyn.wong@toyota.com.au</a>
                            </div>
                        </div>   
                    </div>
                    <div className="col--4">                
                        <ul className="IconList IconList-management row">
                            <li><a data-icon={String.fromCharCode(57399)} href={URL.getStaticAssets("docs/management/fdlp/" + this.props.group.replace("fdlp_", "") + "/fdlp_contact_list.pdf")} target="_blank">Contact List</a></li>
                        </ul>
                    </div>
                </div>
                <h2 className="hug-top">Future Leaders</h2>
                {this.renderParticipants(PARTICIPANTS[this.props.group])}
                
            </div>
        );
    },
    renderParticipants: function (participants) {        
        // Three nested arrays and a modulus to creats slightly better floats
        var cols = [[], [], []];
        _.each(participants, function(item, index){
            var markup = <div key={index} className="Media Widget p">
                <img className="Media_image" src={URL.getStaticAssets("img/fdlp/avatar/" + item[0].replace(' ', '.') + ".jpg")} width="64" height="64" />
                <div className="Media_body">
                    <div className="t-capitalize">{item[0].toLowerCase()}</div>
                    <p><strong>{item[1]}</strong><br/><span className="t-muted">{item[2]}</span></p>
                </div>
                {item[3] ? <p><em dangerouslySetInnerHTML={{__html: "\"" + item[3] + "\""}}></em></p> : ''}
            </div>;
            cols[index % 3].push(markup);
        });


        return <div className="grid grid-tight">
            <div className="col--">{cols[0]}</div>
            <div className="col--">{cols[1]}</div>
            <div className="col--">{cols[2]}</div>
        </div>;
    }
});

module.exports = FDLPParticipants;