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

class ProductFactSheetHome extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ProductFactSheetHome';
    }
    render() {

        return <div>
            <h1>Fact Sheets</h1>
            {this.renderFactsheets()}            
        </div>
    }
    renderFactsheets() {
        var relevantFactsheets = (item) => {
            if(this.props.location.query.val) {
                return item.get('tags') && item.get('tags').includes(this.props.location.query.val);                
            } 
            return true;
        }

        var factsheets = this.props.factsheet
            .filter(relevantFactsheets);

        if(factsheets.size === 0) {
            return <div className="InfoBox">No factsheets were found.</div>
        }

        return <ul className="ListDivided ListDivided-tight">{factsheets.map(this.renderListItem).toJS()}</ul>
    }
    renderListItem(fact, key) {


        return <li key={key}>
            <Link to={`/product/factsheet/${fact.get('id')}`}>
                <Time format="MMM YYYY" className="right">{fact.get('date')}</Time>
                {fact.get('title')}
            </Link>
        </li>
    }
}

export default ProductFactSheetHome;