import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import * as cx from 'classnames'
import * as ReactTooltip from 'react-tooltip'

import { ITrackingStatusComponentProps } from './interfaces'

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

import './styles.styl'

export const TrackingStatus = ({ recipientLength, trackingStatus, composeViewUUID, actions: { trackClick } }: ITrackingStatusComponentProps) => {
  const tooManyRecipients = recipientLength > 1
  const tooltip = tooManyRecipients ? `Drift Tracking is only available for emails with a single recipient` : `Click to turn Drift Tracking ${trackingStatus ? 'OFF' : 'ON'}`
  return <div>
    <div data-tip data-for="drift-tracking" className={cx('drift-email-extension-tracking', { trackingOn: !tooManyRecipients && trackingStatus })} onClick={() => !tooManyRecipients && trackClick({ composeViewUUID, sendStatus: !trackingStatus })}>
      <InlineSVG className="drift-email-extension-tracking-bolt" src={bolt} />
      <div>{`Tracking is ${!tooManyRecipients && trackingStatus ? 'ON' : 'OFF'}`}</div>
    </div>
    <ReactTooltip id="drift-tracking" effect="solid" className="drift-email-extension-tooltip">
      <span>{tooltip}</span>
    </ReactTooltip>
  </div>
}

export default TrackingStatus