$(document).ready(function() {

  function guardedFunction(func) {
    var executing = false
    return function() {
      if (executing) {
        return
      }
      executing = true
      var args = Array.prototype.slice.call(arguments)
      var ret = func.apply(this, args)
      executing = false
      return ret
    }
  }

  function observe(sel, fn, runFn, attrs) {
    var el = $(sel).get(0)
    if (!el) {
      return
    }
    if (undefined === attrs) {
      attrs = {
        childList: true,
        subtree: true,
      }
    }
    var myFn = guardedFunction(fn)
    var obs = new MutationObserver(function(mutLst, observer) {
      if (false === myFn(mutLst, observer, $(el))) {
        observer.disconnect()
      }
      observer.takeRecords()
    })
    obs.observe(el, attrs)
    if (runFn === false) {
      return obs
    }
    if (false === myFn()) {
      obs.disconnect()
    }
    return obs
  }

  function handleCalendarView() {
    observe($('body'), function() {
      if (!$('div.calendar-options').length) {
        return
      }

      $(".schedule-calendar-toolbar .sync-calendar-button").remove()
      $(".schedule-calendar-toolbar").prepend(`<div class="sync-calendar-button">
                <button class="mdBtnR mdBtnR-primary" type="button" aria-label="Sync to calendar">
                    <span data-test="button-text" class="mdBtnR-text">Sync to calendar</span>
                </button>
            </div>`)

      return false
    })

    observe($('body'), function() {
      if (!$('#rf-calendar').length) {
        return
      }
      $('#rf-calendar').parent().append(`<style>
                div#rf-overlay-id {
                    display: none
                }
                </style>`)
      return false
    })
  }

  if (window.location.href.indexOf("servicenow/" + eventCode + "/agenda") !== -1) {
    handleCalendarView()
  }

  if (window.location.href.indexOf("page/myagenda") !== -1) {
    handleCalendarView()
  }

  $("body").on("click", ".schedule-calendar-toolbar .rfSI-toggle button:nth-child(2)", function() {
    handleCalendarView()
  })

  $("body").on("click", ".sync-calendar-button button", function() {
    let target = $('now-header').length
      ? $('now-header')
      : $('now-header-nav')

    target.attr('showsynccalendar', 'true')
  })

  class AgendaSync extends HTMLElement {
    connectedCallback() {
      handleCalendarView()
    }
  }

  customElements.define('agenda-sync', AgendaSync)

  function waitForElement(element, callback) {
    if (document.querySelector(element)) {
      callback()
    } else {
      setTimeout(function () {
        waitForElement(element, callback)
      }, 100)
    }
  }

  waitForElement('.servicenow-wflondon24-myagenda-page-agenda .rfSI-toggle', ()=>{
    document.querySelector('.rfSI-toggle button:nth-child(2)').click()
  })

})