import * as React from 'react'
import * as cx from 'classnames'
import InlineSVG from 'svg-inline-react'
import { get, isArray } from 'lodash'
import { IConversationPanelComponentProps } from './interfaces'
import { APP_URL } from '../../../utils/ResourceConstants'
import Avatar from '../../Avatar'
import { humanizeDate } from '../../../utils/humanize'
import './styles.styl'

const convo = require('!svg-inline-loader?removeSVGTagAttrs=false&removeTags=false!../../../../img/svg/reply-icon.svg')

class ConversationPanel extends React.Component<IConversationPanelComponentProps, { hover: boolean }> {

  constructor(props: IConversationPanelComponentProps) {
    super(props)
    this.state = {
      hover: false,
    }
  }

  hover = (hoverState: boolean) => {
    this.setState({ hover: hoverState })
  }

  render() {
    const { conversation, avatarUrl, avatarStatus, profile, compact, endUser, endUsersLoading, unreadMessagesByConversationId } = this.props
    if (endUsersLoading) {
      return null
    }
    const company = get(profile, 'attributes.employmentName', '')
    const displayName = get(profile, 'attributes.displayName', '')
    const displayHeader = company || displayName || get(endUser, 'email') || 'Site Visitor'
    const messagesForConversationId = unreadMessagesByConversationId
    const hasUnreadMessages = isArray(messagesForConversationId) ? messagesForConversationId.length : get(conversation, 'unreadMessageCount', 0)
    return (
      <div
        key={conversation.id}
        className={cx('unread-conversation-panel', { compact })}
        onMouseEnter={() => this.hover(true)}
        onMouseLeave={() => this.hover(false)}
      >
        <div className="unread-conversation-panel-picture">
          <Avatar
            email={get(endUser, 'email')}
            avatarUrl={avatarUrl}
            avatarStatus={avatarStatus} />
        </div>
        <div
          className="unread-conversation-panel-text">
          <span className="name name-measure"></span>
          <div className="unread-conversation-panel-top-row">
            { !!hasUnreadMessages && <div className="unread-tag">unread</div> }
            <span className="timestamp">{humanizeDate(conversation.latestActivity)}</span>
          </div>
          {this.state.hover
            ? <div className="conversation-reply" onClick={() => window.open(`${APP_URL}/inboxes/${conversation.inboxId}/conversations/${conversation.id}`, '_blank')}>
                <InlineSVG className="conversation-reply-icon active" src={convo} />Reply</div>
            : <span className={cx('name', { overflow: displayHeader.length > 15 })}>{displayHeader}</span>}
        </div>
      </div>
    )
  }
}

export default ConversationPanel