/* eslint-disable react-hooks/exhaustive-deps */
import _get from 'lodash/get'
import { useEffect } from 'react'

import { getPixelScript } from '../api'
import { isBrowser } from '../utils'

export interface pageOptions {
  pageUrl: string;
  page?: string;
  orderHash?: string;
}

function appendScriptsToHeader(code: string) {
  if (isBrowser && code) {
    const tempEl = document.createElement('div')
    tempEl.innerHTML = code
    const scripts = tempEl.getElementsByTagName('script')

    for (let index = 0; index < scripts.length; ++index) {
      const script = document.createElement('script')
      script.type = 'text/javascript'

      if (scripts[index].src) {
        script.src = scripts[index].src
      } else {
        script.innerHTML = scripts[index].innerHTML
      }

      document.head.appendChild(script)
    }
  }
}

const addGTagToHeader = (tagId?: string, links?: string[]) => {
  if (document?.head && document?.body && tagId) {
    const script = document.createElement('script')
    script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','${tagId}');`.trim()
    document.head.append(script)

    const scriptBody = document.createElement('noscript')
    scriptBody.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${tagId}"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>`
    document.body.append(scriptBody);

    (window as any).dataLayer = (window as any).dataLayer || [];
    (window as any).gtag = function gtag(...args: any){(window as any).dataLayer.push(args)}
    if (links) {
      (window as any)?.gtag('set', 'linker', {
        'domains': links
      })
    }
    (window as any).gtag('js', new Date());
    (window as any).gtag('config', tagId)
  }
}

export const usePixel = async (
  eventId: string | number,
  options: pageOptions
) => {
  const getScript = async () => {
    if (!eventId) return

    try {
      const response = await getPixelScript(eventId, options)
      const pixels = _get(response, 'data.data.attributes.pixels', '')
      appendScriptsToHeader(pixels)
      const brandGoogleTagKey = _get(response, 'data.data.attributes.brandGoogleTagKey', '')
      const eventGoogleTagKey = _get(response, 'data.data.attributes.eventGoogleTagKey', '')
      const eventGoogleTagManagerLinkerDomains = _get(response, 'data.data.attributes.eventGoogleTagManagerLinkerDomains', '')
      addGTagToHeader(brandGoogleTagKey, eventGoogleTagManagerLinkerDomains)
      if (eventGoogleTagKey) {
        addGTagToHeader(eventGoogleTagKey, eventGoogleTagManagerLinkerDomains)
      }
    } catch (e) {
      console.error(e)
    }
  }

  useEffect(() => {
    getScript()
  }, [eventId])
}