const MIXPANEL_PROJECT_TOKEN = '87ac045b8fae6d1c663b5f332e6cc853'

const mobileOpenButton = document.getElementById('mobile-hamburger-menu')
const mobileCloseButton = document.getElementById('mobile-hamburger-close')
const stickyMobileOpenButton = document.getElementById('sticky-mobile-hamburger-menu')

const mobileMenu = document.getElementById('mobile-menu')

;[mobileOpenButton, stickyMobileOpenButton]
  .filter((e) => e)
  .forEach((el) => {
    el.addEventListener('click', function (e) {
      mobileMenu.style.display = 'block'
    })
  })

mobileCloseButton.addEventListener('click', function (e) {
  mobileMenu.style.display = 'none'
})

var scriptURL = 'https://runreflect.wufoo.com/forms/z1mlbxv31bwbt20/'

// Header navigation
const setStickyHeaderClass = () => {
  try {
    if (window.pageYOffset > 0) {
      document.querySelector('.header-nav.sticky').classList.remove('hidden')
    } else {
      document.querySelector('.header-nav.sticky').classList.add('hidden')
    }
  } catch (e) {
    // guard against running this on pages without a sticky header
  }
}

setStickyHeaderClass()

document.addEventListener('scroll', setStickyHeaderClass)

const signUpButtons = document.querySelectorAll('.sign-up-button')
if (signUpButtons) {
  signUpButtons.forEach((signUpButton) => {
    signUpButton.addEventListener('click', function () {
      if (window.ga) {
        const trackers = window.ga.getAll()

        if (trackers && trackers.length > 0) {
          const tracker = trackers[0]

          tracker.send({
            hitType: 'event',
            eventCategory: 'Registration',
            eventAction: 'TryForFree',
          })
        }
      }
    })
  })
}

// Article CTA
const articleCTA = document.querySelector('#reflect-sidebar-cta')
if (articleCTA) {
  articleCTA.addEventListener('click', function () {
    if (window.ga) {
      const trackers = window.ga.getAll()

      if (trackers && trackers.length > 0) {
        const tracker = trackers[0]

        tracker.send({
          hitType: 'event',
          eventCategory: 'Articles',
          eventAction: 'AlternativeSignUp2',
        })
      }
    }
  })
}

Array.from(document.querySelectorAll('.mobile-menu-content a')).map((element) => {
  element.addEventListener('click', function () {
    document.querySelector('#mobile-menu').style.display = 'none'
  })
})

Array.from(document.querySelectorAll('.use-case-nav')).map((element) => {
  element.addEventListener('mouseenter', function () {
    element.querySelector('.sub-menu').style.display = 'block'
  })
  element.addEventListener('mouseleave', function () {
    element.querySelector('.sub-menu').style.display = 'none'
  })
})

var summaryInclude = 60
var fuseOptions = {
  shouldSort: true,
  includeMatches: true,
  threshold: 0.0,
  tokenize: true,
  location: 0,
  distance: 100,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: [
    { name: 'title', weight: 0.8 },
    { name: 'contents', weight: 0.5 },
    { name: 'tags', weight: 0.3 },
    { name: 'categories', weight: 0.3 },
  ],
}

function searchOnKeyup(e) {
  var query = e.srcElement.value
  executeSearch(query)
  isSearchActive = true
}

var SEARCH_RESULTS_SECTION_ID = 'search-results-section'
var SEARCH_RESULTS_ID = 'search-results'
var SEARCH_FORM_ID = 'search-form'
var isSearchActive = false

document.addEventListener('click', function (e) {
  // Determine whether to hide search results if it's active
  if (isSearchActive) {
    const searchResults = document.getElementById(SEARCH_RESULTS_SECTION_ID)
    const searchForm = document.getElementById(SEARCH_FORM_ID)

    var curElement = e.srcElement
    var isSearchClick = false
    while (curElement) {
      if (curElement == searchResults || curElement == searchForm) {
        isSearchClick = true
        break
      }
      curElement = curElement.parentElement
    }

    if (!isSearchClick) {
      clearSearchResults()
    }
  }
})

window.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[data-tooltip].tooltip-container').forEach((tooltip) => {
    const tooltipText = tooltip.getAttribute('data-tooltip')

    tippy(tooltip, {
      content: tooltipText,
      placement: 'top-start',
      interactive: true,
    })
  })

  const videoModal = document.getElementById('video-modal')
  const videoContainer = document.querySelectorAll('.video-link')

  if (videoModal) {
    videoContainer.forEach((element) => {
      element.addEventListener('click', function () {

        var iframe = videoModal.querySelector("iframe");
        if(iframe) {
          iframe.src = iframe.getAttribute("data-src");
        }
        videoModal.classList.remove('hidden')
        document.getElementById('video').play()
      })
    })

    videoModal.querySelector('.modal-close').addEventListener('click', function () {
      videoModal.classList.add('hidden')
      var iframe = videoModal.querySelector("iframe");
      if(iframe) {
        iframe.src = ""
      }
      document.getElementById('video').pause()
    })
  }

  document.querySelectorAll('.app-inline-tab').forEach((element) => {
    element.addEventListener('click', function () {
      const imageId = element.getAttribute('data-image-id')

      document.querySelectorAll('.app-inline-tab').forEach((image) => {
        image.classList.add('disabled')
        image.classList.remove('active')
      })
      element.classList.remove('disabled')
      element.classList.add('active')

      document.querySelectorAll('.app-visual-observe-image img').forEach((image) => image.classList.add('hidden'))
      document.getElementById(imageId).classList.remove('hidden')
    })
  })
})

const runningTestsElement = document.getElementById('running-tests')

if (runningTestsElement) {
  let isTestsRunning = true
  const testsObserver = new IntersectionObserver(
    function (entries) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio >= 0.5 && isTestsRunning) {
          document.querySelectorAll('.test-row').forEach((element) => {
            setTimeout(function () {
              element.querySelector('.running-indicator').classList.add('hidden')
              element.querySelector('.success-indicator').classList.remove('hidden')
              element.querySelector('.latest-run').innerText = 'a few seconds ago'
            }, randomElapsedTimeForRunningTests())
          })
        }
      })
    },
    { threshold: 0.5 }
  )

  testsObserver.observe(runningTestsElement)
}

const autoplayElement = document.getElementById('auto-play-video')

if (autoplayElement) {
  const autoplayVideoObserver = new IntersectionObserver(
    function (entries) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio >= 0.1) {
          entry.target.play()
        } else {
          entry.target.pause()
        }
      })
    },
    { threshold: 0.1 }
  )

  autoplayVideoObserver.observe(autoplayElement)
}

const aiFormElement = document.getElementById('ai-form')

if (aiFormElement) {
  const graphObserver = new IntersectionObserver(
    function (entries) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio >= 0.5) {
          aiFormElement.classList.add('animate')
        }
      })
    },
    { threshold: 0.5 }
  )

  graphObserver.observe(aiFormElement)
}

function logVideoPlay(label) {
  sendGAEvent({
    category: 'Homepage',
    action: 'PlayVideo',
    label: label,
  })
}

function logUser(userType) {
  sendGAEvent({
    category: 'Homepage',
    action: 'LearnMoreUser',
    label: userType,
  })
}

function randomElapsedTimeForRunningTests() {
  // Calculate random number between 1 and 4 seconds
  return Math.random() * 3000 + 1000
}

function clearSearchResults() {
  document.getElementById(SEARCH_RESULTS_ID).innerHTML = ''
  document.getElementById(SEARCH_RESULTS_SECTION_ID).style.display = 'none'
  isSearchActive = false
}

function sendGAEvent(event) {
  var gtag = window.gtag

  if (gtag) {
    gtag('event', event.action, {
      category: event.category,
      label: event.label,
    })
  }
}

function executeSearch(searchQuery) {
  if (searchQuery.trim().length < 2) {
    return
  }
  const searchBarWidth = document.getElementById(SEARCH_FORM_ID).getBoundingClientRect().width - 2 // adjust for borders

  document.getElementById(SEARCH_RESULTS_SECTION_ID).style.width = searchBarWidth + 'px'
  document.getElementById(SEARCH_RESULTS_SECTION_ID).style.display = 'block'

  var existingUrls = new Set()

  fetch('/index.json', { method: 'GET' }) // The browser will cache this on the 2nd-to-nth request on a page
    .then((response) => response.json())
    .then((data) => {
      var dedupedData = []
      data.forEach((datum) => {
        if (!existingUrls.has(datum.permalink)) {
          dedupedData.push(datum)
          existingUrls.add(datum.permalink)
        }
      })

      var fuse = new Fuse(dedupedData, fuseOptions)
      var result = fuse.search(searchQuery)

      document.getElementById(SEARCH_RESULTS_ID).innerHTML = ''

      if (result.length > 0) {
        populateResults(result)
      } else {
        document.getElementById(SEARCH_RESULTS_ID).innerHTML =
          '<div class="text-gray-3 pt-0-5 pb-1" style="font-size: 14px; font-weight: 500;">No matches found</div>'
      }
    })
}

function populateResults(result) {
  var templateDefinition = document.getElementById('search-result-template').innerHTML
  var aggregatedOutput = ''

  result.forEach(function (value) {
    var output = render(templateDefinition, {
      key: '',
      title: value.item.title,
      link: value.item.permalink,
      tags: value.item.tags,
      categories: value.item.categories,
      snippet: value.item.description,
    })

    aggregatedOutput += output
  })

  document.getElementById('search-results').innerHTML = aggregatedOutput
}

// Template string renderer.  Replaces '${foo}' with its associated value
function render(templateString, data) {
  var conditionalMatches = null
  var conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g
  //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
  var copy = templateString
  while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
    if (data[conditionalMatches[1]]) {
      //valid key, remove conditionals, leave contents.
      copy = copy.replace(conditionalMatches[0], conditionalMatches[2])
    } else {
      //not valid, remove entire section
      copy = copy.replace(conditionalMatches[0], '')
    }
  }
  templateString = copy
  //now any conditionals removed we can do simple substitution
  var key, find, re
  for (key in data) {
    find = '\\$\\{\\s*' + key + '\\s*\\}'
    re = new RegExp(find, 'g')
    templateString = templateString.replace(re, data[key])
  }
  return templateString
}