import React, {Component} from 'react'
import css from './group.scss'
import base64 from '../../../../assets/images/base64'
import getHighLightText from '../../../../utils/getHighLightText'

class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  goToChannel = (id) => {
    const {history} = this.props
    history.push(`/chat/${id}`)
  }

  render() {
    const { closeSearchModal } = this.props
    const {iconUrl, channelName, containUserName, count, channelId} = this.props.data;
    const {lang} = this.props;
    return (<li className={css.item} onClick={()=>{this.goToChannel(channelId);closeSearchModal()}}>
      <div className={`${css.head} s-bg-info`}>
        <img src={iconUrl ? iconUrl : base64.groupHead} alt=""/>
      </div>
      <strong className={css.title}>
        <p>{getHighLightText(typeof channelName === "undefined" ? lang.noName : channelName)}</p>
        <p>{getHighLightText(`(${count}${lang.person})`)}</p>
      </strong>
      {containUserName ? <span className={css.detail}>{lang.include}:<em className="s-primary">{containUserName}</em></span> : null}
    </li>)
  }

}

export default Group;