var React = require('react'),
    SupportedPlatforms = require('./supportedplatforms.jsx'),
    classNames      = require('classnames');

var Plugin = React.createClass({
    shouldComponentUpdate: function(nextProps, nextState) {
        return this.props.plugin !== nextProps.plugin;
    },
    render: function() {
        var license = this.props.plugin.license;
        if (license && license.length > 1) {
            license = license[0];
        }
        var downloadField;

        var classes = classNames({
            'pluginCard': true,
            'featuredPlugin': this.props.plugin.isOfficial
        });

        if(this.props.plugin.downloadCount) {
            var downloadCount = this.props.plugin.downloadCount.toLocaleString();
            downloadField = <p><small> {downloadCount} downloads last month</small></p>;
        }
        return (
            <li>
                <div className={classes}>
                    <div className="primaryContent">
                        <div className="header">
                            <h3><a href={'https://www.npmjs.com/package/' + this.props.plugin.name} target="_blank">{this.props.plugin.name}</a></h3>
                            <small className="pluginVersion">v{this.props.plugin.version}</small>
                            <small> by </small>
                            <small className="pluginAuthor">{this.props.plugin.author}</small>
                        </div>
                        <div className="pluginDesc">{this.props.plugin.description}</div>
                    </div>
                    <div className="secondaryContent">
                        <SupportedPlatforms keywords={this.props.plugin.keywords}/>
                        <div className="extraInfo">
                            <p><small><strong>License:</strong> {license}</small></p>
                            {downloadField}
                            <p><small><em>Last updated {this.props.plugin.modified} days ago</em></small></p>
                        </div>
                    </div>
                </div>
            </li>
        )
    }
});

module.exports = Plugin;