window.addEventListener('DOMContentLoaded', () => {
  const globalViewButton = document.querySelector('button.global-view');
  const globalAdminButton = document.querySelector('button.global-admin');
  if (!globalViewButton && !globalAdminButton) {
    return;
  }

  const permissionInfo = {
    view: {
      type: 'view',
      button: globalViewButton,
      icon: document.querySelector('button.global-view i'),
      text: document.querySelector('button.global-view .global-view-text'),
      onIcon: 'fa-eye',
      offIcon: 'fa-eye-slash',
      toggleUrl: globalViewButton?.dataset.toggleUrl,
    },
    admin: {
      type: 'admin',
      button: globalAdminButton,
      icon: document.querySelector('button.global-admin i'),
      text: document.querySelector('button.global-admin .global-admin-text'),
      onIcon: 'fa-user-hard-hat',
      offIcon: 'fa-user-slash',
      toggleUrl: globalAdminButton?.dataset.toggleUrl,
    }
  }

  // Need this to bust the cache so the button actually shows up as changed.
  function hardReload() {
    const url = new URL(window.location.href);
    url.searchParams.delete('globalPermissionUpdate');
    url.searchParams.append('globalPermissionUpdate', new Date().valueOf().toString(10));
    window.location.href = url;
  }

  function globalViewIsOn() {
    return globalViewButton?.classList.contains('global-view-on') ?? false;
  }

  function globalAdminIsOn() {
    return globalAdminButton?.classList.contains('global-admin-on') ?? false;
  }

  function enableGlobalPermission(permission) {
    fetch(`${permission.toggleUrl}/on?page=${document.location.pathname}`, {method: 'POST', mode: 'cors', credentials: 'include'}).then((response) => {
      if (response.ok) {
        if (permission.button.dataset.refreshPage === 'true') {
          hardReload()
        } else {
          permission.button.classList.remove(`global-${permission.type}-off`);
          permission.button.classList.add(`global-${permission.type}-on`);
          permission.icon.classList.remove(permission.onIcon);
          permission.icon.classList.add(permission.offIcon)
          permission.text.innerText = `Disable global ${permission.type}`;
        }
      }
    });
  }

  function disableGlobalPermission(permission) {
    fetch(`${permission.toggleUrl}/off?page=${document.location.pathname}`, {method: 'POST', mode: 'cors', credentials: 'include'}).then((response) => {
      if (response.ok) {
        if (permission.button.dataset.refreshPage === 'true') {
          hardReload()
        } else {
          permission.button.classList.add(`global-${permission.type}-off`);
          permission.button.classList.remove(`global-${permission.type}-on`);
          permission.icon.classList.add(permission.onIcon);
          permission.icon.classList.remove(permission.offIcon)
          permission.text.innerText = `Enable global ${permission.type}`;
        }
      }
    });
  }

  globalViewButton?.addEventListener('click', () => {
    if (globalViewIsOn()) {
      disableGlobalPermission(permissionInfo.view);
    } else {
      enableGlobalPermission(permissionInfo.view);
    }
  });

  globalAdminButton?.addEventListener('click', () => {
    if (globalAdminIsOn()) {
      disableGlobalPermission(permissionInfo.admin);
    } else {
      enableGlobalPermission(permissionInfo.admin);
    }
  })
});