import React, { Component } from "react";
import { List, ListItem } from "material-ui/List";
import CluedInMenuItemText from "./items/CluedInMenuItemText";
import CluedInMenuEmptyText from "./items/CluedInMenuEmptyText";
import CluedInViewMoreButton from "./items/CluedInViewMoreButton";
import iso from "../../../iso";
import SubHeader from "material-ui/Subheader";

const defaultTakeNumber = 5;
const subHeaderStyle    = {
    textTransform: 'uppercase',
    fontSize: '12px',
    fontWeight: '800',
    textShadow: '0 1px 1px rgba(0, 0, 0, 0.55)',
    color: '#C2C2C2',
    marginBottom: '-10px'
};

class CluedInFollowedEntity extends Component {

    onEntityClickHandler( id ) {
        const { onEntityClick } = this.props;

        onEntityClick( id );
    }

    render() {
        const { bgColor, insights, title, iconTitle, preText, onViewMoreClick, noMoreText } = this.props;

        const headerContent = <div>{iconTitle}<span>{title}</span>
        </div>;

        let nbInsightsLeft = (insights && insights.length > 0) ? (insights.length - 5) : 0;
        let listContent    = <CluedInMenuEmptyText text={noMoreText}></CluedInMenuEmptyText>;
        let viewMore       = <CluedInViewMoreButton number={nbInsightsLeft}></CluedInViewMoreButton>;
        let viewMoreContent;

        if( insights && insights.length > 0 ) {

            listContent = iso.collection.take( insights, defaultTakeNumber ).map( ( insightWrapper, index )=> {

                let textComponent = (<CluedInMenuItemText
                    preText={preText}
                    text={insightWrapper.Entity.EntityName}
                    entity={insightWrapper.Entity}
                    count={insightWrapper.Count}></CluedInMenuItemText>);

                return <ListItem onTouchTap={this.onEntityClickHandler.bind(this, insightWrapper.Entity.EntityId )}
                                 key={index} primaryText={textComponent}/>;
            } );

            if( insights.length > 5 ) {
                viewMoreContent = <div><ListItem onTouchTap={onViewMoreClick} primaryText={viewMore}/></div>;
            }
        }

        return (
            <List style={ { backgroundColor: bgColor} }>
                <SubHeader style={subHeaderStyle}>{headerContent}</SubHeader>
                <div>{listContent}</div>
                {viewMoreContent}
            </List>
        );
    }
}

export default CluedInFollowedEntity;