// replace the host to local server for development
if (window.location.hostname === '127.0.0.1') {
  document.querySelectorAll('.snapppt-embed-script').forEach(el => {
    el.src = el.src.replace('app.addsauce.com', 'app.addsauce.test')
  })
}

if (window.Shopify && window.Shopify.designMode) {
  window.SNPTEmbedLayer = {}

  function findEmbedWrapper(embed) {
    let parent = embed.parentElement
    while (parent.tagName !== 'BODY') {
      parent = parent.parentElement

      if (parent.classList.contains('shopify-block')) {
        return parent
      }
    }
    return null
  }

  document.body.addEventListener('no-items.sauce.embed', function(evt) {
    let embed = evt.detail.el || evt.detail.scriptEl
    let embedWrapper = findEmbedWrapper(embed)
    if (!embedWrapper) return

    embedWrapper.querySelectorAll(`.sauce--embeds-empty-placeholder`).forEach(el => {
      if (el.style.display === 'none') {
        el.style.display = ''
      }
    })
  })

  document.body.addEventListener('no-access.sauce.embed', function(evt) {
    let embed = evt.detail.el || evt.detail.scriptEl
    let embedWrapper = findEmbedWrapper(embed)
    if (!embedWrapper) return

    embedWrapper.querySelectorAll(`.sauce--embeds-no-access`).forEach(el => {
      if (el.style.display === 'none') {
        el.style.display = ''
      }
    })
  })

  document.body.addEventListener('need-specify-primary-identity.sauce.embed', function(evt) {
    setTimeout(() => {
      let embed = evt.detail.el || evt.detail.scriptEl
      let embedWrapper = findEmbedWrapper(embed)
      if (!embedWrapper) return

      embedWrapper.querySelectorAll(`.sauce--embeds-shopify-primary-account-selection`).forEach(el => {
        if (el.style.display === 'none') {
          el.style.display = ''
        }
        embed.style.filter = 'blur(1px)'
        embed.style.opacity = '0.3'
        embed.style.pointerEvents = 'none'
      })
    }, 500)
  })

  window.renderPreview = function (id) {
    let msgId = 'snpt-tv-preview-msg-' + id
    if (document.querySelector('.' + msgId)) {
      return
    }

    let tvHub = document.getElementById('snpt-tv-' + id)
    let floatingTV = tvHub && tvHub.querySelector('.snptwdgt_tv_cover')
    if (floatingTV == null) {
      setTimeout(() => {
        window.renderPreview(id)
      }, 500);
      return
    }

    console.log('Sauce :: Turn on Sauce TV preview mode')

    function addMsg(parent, titleText) {
      let container = document.createElement('div')
      container.classList.add(msgId)
      container.style.backgroundColor = 'black'
      container.style.padding = '12px'
      container.style.color = 'white'
      container.style.fontFamily = "'cereal'"
  
      let title = document.createElement('div')
      title.textContent = titleText
      title.style.fontSize = '16px'
      title.style.lineHeight = '21px'
      container.appendChild(title)
  
      let msgContainer = document.createElement('div')
      container.appendChild(msgContainer)

      let click = document.createElement('a')
      click.textContent = 'Click'
      click.style.fontSize = '12px'
      click.style.lineHeight = '16px'
      click.style.color = 'white'
      click.href = 'https://app.addsauce.com/backoffice/tv_gallery_embeds'
      click.target = '_blank'
      msgContainer.appendChild(click)

      let msg = document.createElement('span')
      msg.textContent = '\u00A0to publish Sauce TV live.'
      msg.style.fontSize = '12px'
      msg.style.lineHeight = '16px'
      msgContainer.appendChild(msg)
  
      parent.appendChild(container)
      return container
    }


    // add preview msg to floating TV
    {
      let container = addMsg(floatingTV, 'Edit Mode:')
      container.style.marginLeft = '0'
      container.style.marginTop = '-4px'
      container.style.marginRight = '0'
      container.style.marginBottom = '0'
      container.style.borderRadius = '4px'
    }

    // add preview msg to tv hub
    {
      let container = addMsg(tvHub, 'Sauce TV Edit Mode:')
      container.style.position = 'absolute'
      container.style.top = '0'
      container.style.left = '0'
      container.style.right = '0'
      container.style.textAlign = 'center'
      container.style.display = 'none'

      let styleSheet = document.createElement('style')
      styleSheet.textContent = `
        .snptwdgt-sauce-tv-wrappr.snptwdgt-sauce-tv--active .${msgId} {
          display: block !important;
          opacity: 1;
        }
      `
      document.head.appendChild(styleSheet)
    }
  }

  document.body.addEventListener('gallery-off.sauce.embed', function(evt) {
    window.renderPreview(evt.detail.id)
  })
}