import * as React from 'react'
import InlineSVG from 'svg-inline-react'

import * as cx from 'classnames'

import { IUnfollowMenuComponentProps } from './interfaces'

import './styles.styl'

const unfollowUser = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../../img/svg/unfollow-user.svg')
const unfollowDomain = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../../img/svg/unfollow-domain.svg')

const UnfollowMenu = ({ email, userHasSeenUnfollow, hasUnfollowEntries, actions: { addEmailToMuteList, addDomainToMuteList } }: IUnfollowMenuComponentProps) => {
  const domain = email.split('@').pop()
  return <div className={cx('activity-group-quickmenu-container', { onboarding: !userHasSeenUnfollow })}>
    { !userHasSeenUnfollow
      ? <div className="unfollow-menu-header unfollow-onboarding">
          <div className="title">{ hasUnfollowEntries ? `We've upgraded Mute to Unfollow` : 'Unfollow Activity' }</div>
          <div className="subtitle">Unfollow to remove people or domains from your feed. Stay focused by only seeing activity of people important to you.</div>
        <a className="learn-more-link" target="_blank" href="https://help.drift.com/integrations/using-the-drift-email-extension"><button className="onboarding-learn-more-button"><span>Learn More</span></button></a>
        </div>
      : <div className="unfollow-menu-header">
          <div className="title">Unfollow</div>
          <div className="subtitle">Stop seeing activity for...</div>
        </div>  
    }
    <div className="activity-group-quickmenu-option" onClick={() => addEmailToMuteList(email)}>
      <InlineSVG className="activity-group-notif-icon" src={unfollowUser} />
      <div className="unfollow-option">
        <div className="type">This person</div>
        <div className="value"><span className="overflow">{email}</span></div>
      </div>
    </div>
    <div className="activity-group-quickmenu-option" onClick={() => addDomainToMuteList(domain)}>
      <InlineSVG className="activity-group-notif-icon" src={unfollowDomain} />
      <div className="unfollow-option">
        <div className="type">This domain</div>
        <div className="value"><span className="overflow">{domain}</span></div>
      </div>
    </div>
  </div>
}

export default UnfollowMenu