import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import PresenceAvatar from '@ciscospark/react-container-presence-avatar';
import ActivityPostAction from '@ciscospark/react-component-activity-post-action';
import {
  ICON_TYPE_DELETE,
  ICON_TYPE_FLAGGED_OUTLINE
} from '@ciscospark/react-component-icon';

import styles from './styles.css';


const propTypes = {
  actorId: PropTypes.string,
  children: PropTypes.element.isRequired,
  hasError: PropTypes.bool,
  id: PropTypes.string.isRequired,
  isAdditional: PropTypes.bool,
  isFlagged: PropTypes.bool,
  isPending: PropTypes.bool,
  isSelf: PropTypes.bool,
  name: PropTypes.string,
  onActivityDelete: PropTypes.func,
  onActivityFlag: PropTypes.func,
  onActivityRetry: PropTypes.func,
  timestamp: PropTypes.string
};

const defaultProps = {
  actorId: '',
  hasError: false,
  isAdditional: false,
  isFlagged: false,
  isPending: false,
  isSelf: false,
  name: '',
  onActivityDelete: () => {},
  onActivityFlag: () => {},
  onActivityRetry: () => {},
  timestamp: ''
};

function ActivityItemBase({
  actorId,
  children,
  id,
  isAdditional,
  hasError,
  isFlagged,
  isPending,
  isSelf,
  name,
  onActivityDelete,
  onActivityFlag,
  onActivityRetry,
  timestamp
}) {
  let deleteAction;
  let flagAction;
  let errorDisplay;
  const displayName = isSelf ? 'You' : name;

  function handleOnDelete() {
    onActivityDelete(id);
  }

  function handleOnFlag() {
    onActivityFlag(id);
  }

  function handleOnRetry() {
    onActivityRetry(id);
  }

  function getActionClassNames(highlight) {
    const actionClassNames = ['activity-post-action', styles.activityPostAction];
    if (highlight) {
      actionClassNames.push('isHighlighted', styles.isHighlighted);
    }
    return actionClassNames;
  }

  if (!isPending) {
    flagAction = (
      <div className={classNames(getActionClassNames(isFlagged))}>
        <ActivityPostAction
          iconType={ICON_TYPE_FLAGGED_OUTLINE}
          onClick={handleOnFlag}
          title="Flag this message"
        />
      </div>
    );
    if (isSelf) {
      deleteAction = (
        <div className={classNames(getActionClassNames())}>
          <ActivityPostAction
            iconType={ICON_TYPE_DELETE}
            onClick={handleOnDelete}
            title="Delete this message"
          />
        </div>
      );
    }
    else {
      deleteAction = (
        <div className={classNames(getActionClassNames())}>
          <div className={classNames('ciscospark-action-spacer', styles.actionSpacer)} />
        </div>
      );
    }
  }

  if (hasError) {
    errorDisplay = (
      <div
        className={classNames('ciscospark-activity-error', styles.error)}
        role="presentation"
      >
        <button onClick={handleOnRetry}>Unable to post. Click to retry</button>
      </div>
    );
  }

  const activityItemClasses = [
    'activity-item',
    styles.activityItem,
    isAdditional ? styles.additional : '',
    isPending ? styles.pending : ''
  ];

  const avatarClasses = [
    'ciscospark-avatar-wrapper',
    'ciscospark-activity-item-avatar-wrapper',
    styles.avatarWrapper,
    isSelf ? styles.selfAvatar : ''
  ];

  return (
    <div className={classNames(activityItemClasses)}>
      <div className={classNames(avatarClasses)}>
        <PresenceAvatar
          avatarId={actorId}
          iconSize="30px"
          isSelfAvatar={isSelf}
          name={name}
        />
      </div>
      <div className={classNames('ciscospark-content-container', styles.contentContainer)}>
        <div className={classNames('ciscospark-meta', styles.meta)}>
          <div className={classNames('ciscospark-display-name', styles.displayName)} title={name}>{displayName}</div>
          <div className={classNames('ciscospark-published', styles.published)}>{timestamp}</div>
        </div>
        <div className={classNames('ciscospark-activity-content', styles.content)}>
          {children}
        </div>
        {errorDisplay}
      </div>
      <div className={classNames('ciscospark-activity-post-actions', styles.activityPostActions)} >
        {flagAction}
        {deleteAction}
      </div>
    </div>
  );
}

ActivityItemBase.propTypes = propTypes;
ActivityItemBase.defaultProps = defaultProps;

export default ActivityItemBase;

@@ -2971,16 +2971,55 @@
 tional ?
+ classNames('activity-item-additional',
  styles.
@@ -3028,16 +3028,17 @@
 ditional
+)
  : '',%0A 
@@ -3051,16 +3051,52 @@
 ending ?
+ classNames('activity-item-pending',
  styles.
@@ -3102,16 +3102,17 @@
 .pending
+)
  : ''%0A  

add class for pending/additional