import * as React from 'react'
import * as cx from 'classnames'
import InlineSVG from 'svg-inline-react'
import { Props } from './interfaces'
import { Status } from '../../../../interfaces/status'

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

const Avatar = ({ email, avatarUrl, avatarStatus }: Props): JSX.Element => {
  if (avatarStatus === Status.Success) {
    return <img className="image-avatar" src={avatarUrl} />
  }

  if (avatarStatus === Status.Failure) {
    return <div className="default-avatar" >{email.charAt(0).toUpperCase()} </div>
  }

  return null
}

const MutableAvatar = (props: Props): JSX.Element => {
  const {
    email,
    isMuted,
    actions: {
      addEmailToMuteList,
    },
  } = props

  const handleClick = (event:any) => {
    addEmailToMuteList(email)
    event.stopPropagation()
  }

  return (
    <div className={cx({ muted: isMuted })} onClick={handleClick}>
      <Avatar {...props} />
      <div className="overlay" />
      <div className="muteIcon">
        <InlineSVG className="flex" src={notifOff} />
      </div>
    </div>
  )
}

export default MutableAvatar