import * as React from 'react'
import * as moment from 'moment'
import { humanizeTime, renderEndUserName } from '../../../utils/humanize'
import PageViewActivity from './PageViewActivity'
import MessageActivity from './MessageActivity'
import ClickTrackActivity from './ClickTrackActivity'
import OpenTrackActivity from './OpenTrackActivity'
import {
  IActivity,
  IPageViewActivity,
  IMessageActivity,
  IClickTrackActivity,
  ActivityType,
  IOpenTrackActivity,
} from '../../../modules/activity/interfaces'
import { IProfile } from '../../../modules/enrichment/interfaces'

interface ActivityProps {
  activity: IActivity
  profile?: IProfile
  isFirstInGroup: boolean
}

const renderElementBasedOnActivityType = (activity: IActivity) => {
  switch (activity.type) {
    case ActivityType.PAGE_VIEW:
      return (
        <PageViewActivity
          key="activity"
          activity={activity as IPageViewActivity}
        />
      )
    case ActivityType.MESSAGE:
      return (
        <MessageActivity
          key="activity"
          activity={activity as IMessageActivity}
        />
      )
    case ActivityType.CLICK:
      return (
        <ClickTrackActivity
          key="activity"
          activity={activity as IClickTrackActivity}
        />
      )
    case ActivityType.OPEN:
      return (
        <OpenTrackActivity
          key="activity"
          activity={activity as IOpenTrackActivity}
        />
      )
  }
}

const renderCreatedAt = (createdAt: any) => (
  <time
    title={moment(createdAt).format('lll')}
    dateTime={moment(createdAt).toISOString()}
  >
    {humanizeTime(createdAt)}
  </time>
)

class Activity extends React.Component<ActivityProps> {
  renderFirstInGroup() {
    const activity = this.props.activity
    const profile = this.props.profile
    const createdAt = activity.at

    return [
      <div
        key="email"
        className="end-user-email-header"
      >
        <div className="end-user-email">
          {renderEndUserName(activity.email, profile, activity)}
        </div>
      </div>,
      <div
        key={activity.id}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        }}
      >
        {renderElementBasedOnActivityType(activity)}
        {renderCreatedAt(createdAt)}
      </div>,
    ]
  }

  renderSecondInGroup() {
    const activity = this.props.activity
    const createdAt = activity.at

    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        }}
      >
        {renderElementBasedOnActivityType(activity)}
        {renderCreatedAt(createdAt)}
      </div>
    )
  }

  render() {
    return (
      <div className="popup-feed-activity">
        {this.props.isFirstInGroup
          ? this.renderFirstInGroup()
          : this.renderSecondInGroup()}
      </div>
    )
  }
}

export default Activity