import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import { APP_URL } from '../../../utils/ResourceConstants'
import { IMessageActivity } from '../../../modules/activity/interfaces'

const chatIcon = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/respond.svg')

interface MessageActivityProps {
  activity: IMessageActivity,
}

const MessageActivity = ({ activity }: MessageActivityProps): JSX.Element => {
  const message = activity.message
  return (
    <div className="popup-feed-activity-description">
      <span className="activity-message">Replied: </span>
      {(message.attributes && message.attributes.preview) || 'No Preview'}
      <br />
      <a className="respond-button popup-button"
        href={`${APP_URL}/inboxes/${message.inboxId}/conversations/${message.conversationId}`}
        target="_blank"
      >
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <InlineSVG style={{ display: 'flex' }} src={chatIcon} />
          <span style={{ marginLeft: '5px' }}>Respond</span>
        </div>
      </a>
    </div>
  )
}

export default MessageActivity