const $ = require('jquery')
import { black_icon_src } from '../../img/inlineImages'
import { IRecipients } from './contentInterfaces'
let tooltipTether: any

export const tetherOpts = (composeId: any) => ({
  element: `.drift-outbound-tooltip`,
  target: `.drift-outbound-checkbox-label-${composeId}`,
  attachment: 'bottom center',
  targetAttachment: 'top center',
  offset: '15px 0',
})

export const isTrackableEmail = (recipients: IRecipients): boolean => {
  return (!recipients.to || recipients.to.length === 1) &&
    !recipients.cc
}

export const driftSendSetDisabled = (compose: any, disabled: boolean) => {
  compose.find('.drift-compose-select input').prop('disabled', disabled)
}

export const driftSendOff = (compose: any) => {
  compose.dom('send_button').show()
  compose.find('.drift-send').addClass('hidden')
  compose.find('.drift-compose-select').removeClass('selected')
  compose.find('.drift-compose-select input').prop('checked', false)
  compose.find('.drift-compose-select').attr('title', 'Click here to send with Drift!')
}

export const driftSendOn = (compose: any) => {
  compose.dom('send_button').hide()
  compose.find('.drift-send').removeClass('hidden')
  compose.find('.drift-compose-select').addClass('selected')
  compose.find('.drift-compose-select input').prop('checked', true)
  compose.find('.drift-compose-select').attr('title', 'Click here to turn off sending with Drift!')
  driftSendSetDisabled(compose, false)
}

export const toggleSendViaDrift = (compose: any) => (e: any) => {
  if (e.target.tagName === 'INPUT') {
    e.preventDefault()
    return
  }

  if (!isTrackableEmail(compose.recipients())) {
    e.preventDefault()
    showDriftTooltip(compose.id())
    return console.warn(`Drift can't send links with CCs`)
  }

  const selectButton = compose.find('.drift-compose-select')
  if (selectButton.hasClass('selected')) {
    driftSendOff(compose)
  } else {
    driftSendOn(compose)
  }
}

export const generateDriftComposeSelect = (composeId: any) => {
  // add a 'Send via Drift' check box toggle
  const checkbox = document.createElement('input')
  checkbox.type = 'checkbox'
  checkbox.id = 'drift-outbound-checkbox'
  checkbox.checked = true

  const labelForCheckbox = document.createElement('label')
  labelForCheckbox.className = `drift-outbound-checkbox-label-${composeId}`
  labelForCheckbox.htmlFor = 'drift-outbound-checkbox'

  const composeSelectImage = new Image()
  composeSelectImage.src = black_icon_src
  
  const containingDiv = document.createElement('div')
  containingDiv.className = `drift-outbound-checkbox-container`
  $(containingDiv).append(checkbox)
  $(containingDiv).append(composeSelectImage)
  $(containingDiv).append(labelForCheckbox)
  return containingDiv
}
let timeout: any
const showDriftTooltip = (composeId: any) => {
  tooltipTether && tooltipTether.setOptions(tetherOpts(composeId))
  const tooltip = $(`.drift-outbound-tooltip`)
  tooltip.show()
  clearTimeout(timeout)
  timeout = setTimeout(() => tooltip.hide(), 3000)
}

export const initialSendViaDriftState = (compose: any, authStatus: boolean, tether: any) => {
  const isTrackable = isTrackableEmail(compose.recipients())
  tooltipTether = tether
  if (authStatus && isTrackable) {
    driftSendOn(compose)
  } else {
    if (!isTrackable) {
      showDriftTooltip(compose.id())
    }
    driftSendOff(compose)
    driftSendSetDisabled(compose, isTrackable)
  }
  
}

export const updateStateOnRecipientChange = (compose: any, authStatus: boolean) => {
  const isTrackable = isTrackableEmail(compose.recipients())
  if (!authStatus || !isTrackable) {
    driftSendOff(compose)
    driftSendSetDisabled(compose, true)
    showDriftTooltip(compose.id())
  } else {
    driftSendSetDisabled(compose, false)
    $(`.drift-outbound-tooltip`).hide()
  }
}

export const validateCallbackForCompose = (compose: any, parsedRecipient: string, to: string) => {
  const recipients = compose.recipients()
  if (!isTrackableEmail(recipients)) {
    console.warn('Not trackable list of recipients')
    return false
  }

  if (parsedRecipient !== to) {
    console.warn('email recipient did not match the callback email')
    return false
  }
  return true
}

export const generateGmailBanner = (white_icon_src: string) => `
<div class="drift-outbound-gmail-notification" style="display: none; position: relative; justify-content: space-between; height: 30px; width: 100%; transform: translateY(-5px); background-color: #0176FF; top: 0px; right: 0px;">
  <div></div>
  <div class="drift-banner-notification-text" style="display: flex; justify-content: center; line-height:30px; font-size: 11px; color: #FFFFFF;">
    <img src=${white_icon_src} style="margin-top: 7px; margin-right: 6px; height: 16px; width: 16px;"></img>
    <p style="display: inline; margin: 0;">Learn more about recent activity from&nbsp;<p id='drift-outbound-banner-email' style="display: inline; margin: 0; font-weight: bold;"></p> &nbsp;in the Drift extension above</p>
  </div>
  <a class="close" style="font-size: 20px; margin-top: 4px; margin-right: 5px;"><svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"> <title> Artboard 2 </title> <path d="M7.08 6.4l5.13 5.15c.2.2.2.5 0 .7-.1.1-.2.15-.32.15s-.26-.05-.35-.14L6.4 7.1l-5.13 5.16c-.1.1-.22.14-.35.14-.13 0-.25-.05-.35-.14-.2-.2-.2-.52 0-.7l5.1-5.16-5.1-5.14c-.2-.2-.2-.52 0-.7.2-.2.5-.2.7 0l5.1 5.14L11.5.53c.2-.2.52-.2.7 0 .2.2.2.5 0 .7L7.1 6.4z" fill="#7695A5" fill-rule="evenodd"/> </svg> </a> 
</div>
`

export const generateTestEmailBody = (onboardingHyperlink: string) => `
  Hey there!
  <div><br></div>
  <div>Welcome to the Drift Extension!
    <div><br></div>
    <div>A couple tips to get started:</div>
    <div><br></div>
    <div>1) <b>Use <a href="${onboardingHyperlink}">hyperlinks</a> to link</b> to pages where Drift is installed if you want to greet recipients with a personalized message.</div>
    <div><br></div>
    <div>2) <b>Add one recipient per email.</b> We won't track emails with multiple recipients to ensure we're identifying the right person. And our links will only identify a person once in case your email gets shared :)</div>
    <div><br></div>
    <div>Go ahead and give it a try. Just hit “Send with Drift” and you’ll get notified as soon as we open your email.
    </div>
  </div>
  `