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 HearingIcon from "material-ui/svg-icons/av/hearing";
import { menuIcon } from "../../styles";
import iso from "../../../iso";
import { FormattedMessage } from "react-intl";
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 CluedInSavedSearch extends Component {

    onSearchClickHandler( id ) {
        const { onSearchClick } = this.props;

        onSearchClick( id );
    }

    render() {
        const { bgColor, searches, onViewMoreClick } = this.props;
        const headerContent = <div><HearingIcon
            style={menuIcon}></HearingIcon><span>{<FormattedMessage
            id="CluedInSavedSearch.KeepInTheLoop"></FormattedMessage>}</span>
        </div>;

        let nbSearchesLeft = (searches && searches.length > 0) ? (searches.length - 5) : 0;

        let viewMore    = <CluedInViewMoreButton number={nbSearchesLeft}></CluedInViewMoreButton>;
        let listContent = <CluedInMenuEmptyText
            text={<FormattedMessage id="CluedInSavedSearch.NoSearch"></FormattedMessage>}></CluedInMenuEmptyText>;
        let viewMoreContent;

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

            listContent = iso.collection.take( searches, defaultTakeNumber ).map( ( search, index ) => {

                let textComponent = (<CluedInMenuItemText
                    query={search.Query}
                    text={search.Name}
                    count={search.Count}></CluedInMenuItemText>);

                return <ListItem onTouchTap={this.onSearchClickHandler.bind(this, search.Id )}
                                 key={index} primaryText={textComponent}/>;
            } );

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

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

export default CluedInSavedSearch;