import * as cx from 'classnames'
import * as React from 'react'
import * as moment from 'moment'
import ClickOutside from 'react-click-outside'
import * as ReactCSSTransitionReplace from 'react-css-transition-replace'
import {
  humanizeDate,
  humanizeTime,
  renderEndUserName,
  renderEndUserShortName,
} from '../../../utils/humanize'
import { pluralize } from 'humanize-plus'
import InlineSVG from 'svg-inline-react'
import { APP_URL } from '../../../utils/ResourceConstants'
import Avatar from './Avatar'
import { Props, State } from './interfaces'
import { ActivityType, IPageViewActivity } from '../../../modules/activity/interfaces'
import {
  IActivityGroup,
  IOpenTrackActivityGroup,
  IClickTrackActivityGroup,
  IConversationActivityGroup,
} from '../../../modules/activityGroups/interfaces'
import './styles.styl'

import UnfollowMenu from './UnfollowMenu'

const chatIcon = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/reply.svg')
const caretRightIcon = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/caret-right.svg')
const pageView = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/page-view.svg')
const dotsMenu = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/three-dots-menu.svg')
const click = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/click.svg')
const open = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/open.svg')
const messages = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/messages.svg')

class ExpandableActivityGroup extends React.Component<Props, State> {
  state = {
    expanded: false,
  }

  handleExpand = () => {
    this.setState({ expanded: !this.state.expanded })
  }

  renderIcon = (type: ActivityType) => {
    switch (type) {
      case ActivityType.PAGE_VIEW:
        return <InlineSVG className="activity-group-activity-icon" src={pageView} />
      case ActivityType.CLICK:
        return <InlineSVG className="activity-group-activity-icon" src={click} />
      case ActivityType.OPEN:
        return <InlineSVG className="activity-group-activity-icon" src={open} />
      case ActivityType.MESSAGE:
        return <InlineSVG className="activity-group-activity-icon" src={messages} />
    }
  }

  renderActivityType = (activityGroup: IActivityGroup) => {
    switch (activityGroup.type) {
      case ActivityType.PAGE_VIEW:
        return (
          <span>
            Visit: {activityGroup.total} {pluralize(activityGroup.total, 'Page View')}
          </span>
        )
      case ActivityType.CLICK:
        return (
          <span>
            {activityGroup.total} {pluralize(activityGroup.total, 'Click')}
          </span>
        )
      case ActivityType.OPEN:
        return (
          <span>
            {activityGroup.total} {pluralize(activityGroup.total, 'Open')}
          </span>
        )
      case ActivityType.MESSAGE:
        const inboxId = (activityGroup as IConversationActivityGroup).inboxId
        const conversationId = (activityGroup as IConversationActivityGroup).conversationId
        return [
          <span key="respond">
            <a
              className="reply-button"
              href={`${APP_URL}/inboxes/${inboxId}/conversations/${conversationId}`}
              target="_blank"
            >
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <InlineSVG style={{ display: 'flex' }} src={chatIcon} />
                <span style={{ marginLeft: '5px' }}>REPLY</span>
              </div>
            </a>
          </span>,
          <span key="total">
            {activityGroup.total} {pluralize(activityGroup.total, 'Message')}
          </span>,
        ]
    }
  }

  renderExpanded() {
    if (!this.state.expanded) {
      return false
    }

    const { activityGroup, profile } = this.props

    if (activityGroup.type === ActivityType.PAGE_VIEW) {
      return (
        <div className="activity-group-expanded">
          {activityGroup.activity.map((activity: IPageViewActivity) => {
            return (
              <div className="activity" key={activity.id}>
                <span className="activity-description">
                  Viewed &nbsp;
                  <a
                    href={activity.event.attributes.url}
                    title={activity.event.attributes.url}
                    target="_blank"
                  >
                    {activity.event.attributes.title}
                  </a>
                </span>
                <time
                  title={moment(activity.at).format('lll')}
                  dateTime={moment(activity.at).toISOString()}
                >
                  {humanizeTime(activity.at)}
                </time>
              </div>
            )
          })}
        </div>
      )
    }

    if (activityGroup.type === ActivityType.OPEN) {
      const group = (activityGroup as any) as IOpenTrackActivityGroup
      return (
        <div className="activity-group-expanded">
          <div className="activity-group-expanded-description">
            Opens on your email:{' '}
            {group.gmailId ? (
              <a href={`https://mail.google.com/mail/u/0/#sent/${group.gmailId}`} target="_blank">
                {group.emailSubject || <em>no subject</em>}
              </a>
            ) : (
              group.emailSubject || <em>no subject</em>
            )}
          </div>
          {group.activity.map((activity) => {
            return (
              <div className="activity" key={activity.id}>
                <span className="activity-description">Opened your email</span>
                <time
                  title={moment(activity.at).format('lll')}
                  dateTime={moment(activity.at).toISOString()}
                >
                  {humanizeTime(activity.at)}
                </time>
              </div>
            )
          })}
        </div>
      )
    }

    if (activityGroup.type === ActivityType.CLICK) {
      const group = (activityGroup as any) as IClickTrackActivityGroup
      return (
        <div className="activity-group-expanded">
          <div className="activity-group-expanded-description">
            Clicks on your email:{' '}
            {group.gmailId ? (
              <a href={`https://mail.google.com/mail/u/0/#sent/${group.gmailId}`} target="_blank">
                {group.emailSubject || <em>no subject</em>}
              </a>
            ) : (
              group.emailSubject || <em>no subject</em>
            )}
          </div>
          {group.activity.map((activity) => {
            return (
              <div className="activity" key={activity.id}>
                <span className="activity-description">
                  Clicked{' '}
                  <a href={activity.click.url} target="_blank">
                    {activity.click.linkText || 'a link'}
                  </a>
                </span>
                <time
                  title={moment(activity.at).format('lll')}
                  dateTime={moment(activity.at).toISOString()}
                >
                  {humanizeTime(activity.at)}
                </time>
              </div>
            )
          })}
        </div>
      )
    }

    if (activityGroup.type === ActivityType.MESSAGE) {
      const group = (activityGroup as any) as IConversationActivityGroup
      return (
        <div className="activity-group-expanded">
          {group.activity.map((activity) => {
            return (
              <div className="activity" key={activity.id}>
                <span className="activity-description">
                  <span style={{ color: '#394F5A' }}>
                    {renderEndUserShortName(activityGroup.email, profile, activity)}:&nbsp;
                  </span>
                  <span style={{ color: '#7695A5' }}>
                    {(activity.message.attributes && activity.message.attributes.preview) ||
                      'No Preview'}
                  </span>
                </span>
                <time
                  title={moment(activity.at).format('lll')}
                  dateTime={moment(activity.at).toISOString()}
                >
                  {humanizeTime(activity.at)}
                </time>
              </div>
            )
          })}
          <a
            className="activity-group-hollow-link-button"
            href={`${APP_URL}/inboxes/${group.inboxId}/conversations/${group.conversationId}`}
            target="_blank"
          >
            <div className="activity-group-hollow-button">View Conversation</div>
          </a>
        </div>
      )
    }
    return false
  }

  toggleMuteEmail = (e: React.SyntheticEvent<EventTarget>) => {
    this.stopClickBubble(e)

    const { activityGroup: { email }, actions } = this.props
    actions.addEmailToMuteList(email)
  }

  toggleMuteDomain = (e: React.SyntheticEvent<EventTarget>) => {
    this.stopClickBubble(e)

    const { activityGroup: { email }, actions } = this.props
    const domain = email.split('@').pop()
    actions.addDomainToMuteList(domain)
  }

  addHoverClass = (e: any) => {
    this.removeHoverClass()
    e.currentTarget.classList.add('active')
  }

  removeHoverClass = () => {
    const hoverTargets = Array.prototype.slice.call(
      document.getElementsByClassName('activity-group-quickmenu-hover-target'),
    )
    hoverTargets.map((el: HTMLElement) => el.classList.remove('active'))
  }

  stopClickBubble = (e: any) => {
    e.stopPropagation()
    e.nativeEvent.stopImmediatePropagation()
  }

  render() {
    const { activityGroup, avatarUrl, avatarStatus, profile } = this.props
    const fullBorder = !activityGroup.firstOfDate && activityGroup.firstOfEmail
    const semiBorder = !activityGroup.firstOfDate && !activityGroup.firstOfEmail
    return (
      <div
        className={cx('activity-group-container', {
          unseen: activityGroup.unseen,
        })}
      >
        {activityGroup.firstOfDate && (
          <div className="popup-feed-day-divider">{humanizeDate(activityGroup.latestActivity)}</div>
        )}
        <div
          className={cx('activity-group', {
            'full-border': fullBorder,
            'semi-border': semiBorder,
          })}
          onClick={this.handleExpand}
        >
          <div className="activity-group-avatar">
            {activityGroup.firstOfEmail && (
              <Avatar
                email={activityGroup.email}
                avatarUrl={avatarUrl}
                avatarStatus={avatarStatus}
              />
            )}
          </div>
          <div className="activity-group-summary" onMouseLeave={this.removeHoverClass}>
            <div className="flex" style={{ flexDirection: 'column' }}>
              <div className="end-user-email" title={activityGroup.email}>
                {renderEndUserName(
                  activityGroup.email,
                  profile,
                  activityGroup.activity && activityGroup.activity[0],
                )}
                {this.renderIcon(activityGroup.type)}
              </div>
              <div className="activity-group-summary-description">
                <div className="activity-group-type">{this.renderActivityType(activityGroup)}</div>
                <div className="activity-group-timestamp">
                  {humanizeTime(activityGroup.latestActivity)}
                </div>
              </div>
            </div>
            <div className="activity-group-options">
              <div className="activity-group-quickmenu-hover-target" onMouseEnter={this.addHoverClass}>
                <InlineSVG className="activity-group-quickmenu-icon" src={dotsMenu} onClick={this.stopClickBubble} />
                <ClickOutside onClickOutside={this.removeHoverClass}>
                  <UnfollowMenu email={activityGroup.email} />
                </ClickOutside>
              </div>
              <div className={cx('expand-icon', { expanded: this.state.expanded })}>
                <InlineSVG className="flex" src={caretRightIcon} />
              </div>
            </div>
          </div>
        </div>
        <ReactCSSTransitionReplace
          transitionName="activity-group-expand"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
        >
          {this.renderExpanded()}
        </ReactCSSTransitionReplace>
      </div>
    )
  }
}

export default ExpandableActivityGroup