import { Store } from 'react-chrome-redux'
import { encodeQueryData } from './utils/helpers'
import * as PlaybookActions from './modules/playbook/actions'
import $ = require('jquery')
declare const chrome: any

require('./salesforce-content.styl')

const powerByDriftLinkParams = {
  utm_source: 'extension',
  utm_medium: 'chrome-extension',
  utm_campaign: 'extension-referral',
}

const store = new Store({
  portName: 'DRIFT',
})

const messageEventHandler = (event: any) => {
  switch (event.data.type) {
    case '@@driftext/hide_enroll_modal':
      $('.drift-enroll-sequence-modal').hide()
      break
    case '@@driftext/show_enroll_modal':
      $('.drift-enroll-sequence-modal').show()
      store.dispatch(PlaybookActions.fetchEnrolledSequenceCount())
      break
    case '@@driftext/toggle_onboarding':
      event.data.visible ? $('#DRIFT_ONBOARDING').show() : $('#DRIFT_ONBOARDING').hide()
      break
  }
}
window.addEventListener('message', messageEventHandler, false)

const addEnrollButton = () => {
  const listHoverLinks = document.querySelectorAll('.listHoverLinks')[0]
  const listButtons = document.querySelectorAll('.listButtons')[0]

  if (!listButtons && !listHoverLinks) {
    return
  }

  const frame = document.createElement('iframe') as any
  frame.className = 'drift-enroll-sequence-modal'
  frame.frameBorder = '0'
  frame.src = chrome.extension.getURL('enroll.html')
  document.body.appendChild(frame)

  const container = document.createElement('div')
  container.className = 'drift-enroll-sequence'

  const poweredBy = document.createElement('div')
  poweredBy.appendChild(document.createTextNode('Email ⚡ by '))
  const driftLink = document.createElement('a')
  const driftLinkText = document.createTextNode('Drift')
  driftLink.appendChild(driftLinkText)
  driftLink.href = `https://www.drift.com/powered-by?${encodeQueryData(powerByDriftLinkParams)}`
  poweredBy.appendChild(driftLink)
  container.appendChild(poweredBy)

  const btn = document.createElement('button') as any
  const btnText = document.createTextNode('Enroll in Sequence')
  btn.appendChild(btnText)
  const handleEnrollClick = (event: any) => {
    event.preventDefault()
    chrome.storage.sync.get('seenSequenceOnboarding', (data: any) => {
      if (!data.seenSequenceOnboarding) {
        chrome.storage.sync.set({ seenSequenceOnboarding: true })
        window.postMessage({ type: '@@driftext/toggle_onboarding', visible: true }, '*')
      } else {
        const emails = [] as string[]
        if (listHoverLinks) {
          const email = $('.detailList a[href^="mailto:"]:first').text() || $('.detailList .gmailLink a:first').text()
          emails.push(email)
        } else {
          document.querySelectorAll('.x-grid3-row-selected').forEach((row) => {
            const email = $(row).find('a[href^="mailto:"]').text() || $(row).find('.gmailLink a:first').text()
            emails.push(email)
          })
        }
        if (!emails.length) {
          console.log('Missing emails')
          return
        }
        store.dispatch(PlaybookActions.setSFEmails({ emails }))
        window.postMessage({ type: '@@driftext/show_enroll_modal' }, '*')
      }
    })
  }
  btn.onclick = handleEnrollClick
  container.appendChild(btn)

  if (listHoverLinks) {
    listHoverLinks.parentNode.insertBefore(container, listHoverLinks.nextSibling)
  } else {
    listButtons.parentNode.insertBefore(container, listButtons.nextSibling)
  }
}

const addOnboardingFrame = () => {
  const frame = document.createElement('iframe') as any
  frame.id = 'DRIFT_ONBOARDING'
  frame.frameBorder = '0'
  frame.style.display = 'none'
  frame.style.border = 'none'
  frame.style.position = 'absolute'
  frame.style['z-index'] = 2147483645
  frame.style.top = 0
  frame.style.bottom = 0
  frame.style.left = 0
  frame.style.right = 0
  frame.style.margin = 'auto auto'
  frame.style.height = '100%'
  frame.style.width = '100%'
  frame.style.background = 'rgba(255,255,255,0.9)'
  frame.src = chrome.extension.getURL('sequence-onboarding.html')
  document.body.appendChild(frame)
}

store.ready().then(() => {
  const leadTab = document.querySelectorAll('li#Lead_Tab')[0]
  const contactTab = document.querySelectorAll('li#Contact_Tab')[0]
  const onContactsOrLeadsRoute = (leadTab && leadTab.classList.contains('zen-active'))
    || (contactTab && contactTab.classList.contains('zen-active'))
  if (onContactsOrLeadsRoute) {
    chrome.storage.sync.get('seenSequenceOnboarding', (data: any) => {
      if (!data.seenSequenceOnboarding) {
        addOnboardingFrame()
      }
    })
    addEnrollButton()
  }
})