function recursiveAdaptWidgets(prefix, element, user) {
  //- This function is a workaround for the currently unworking populate
  //- Feel free to see examples on page-circles-

  element.querySelectorAll('[' + prefix + '-user-id]').forEach((el) => {
    el.setAttribute(el.getAttribute(prefix + '-user-id'), user['@id']);
  });

  if (element != document) {

    //- Allow to bind-user on selected attribute
    if (element.getAttribute(prefix + '-user-id')) {
      element.setAttribute(element.getAttribute(prefix + '-user-id'), user['@id']);
    }

    //- Allow to set data-src to a children sib-form
    if (element.getAttribute(prefix + '-bind-resources')) {
      let form = element.querySelector(element.getAttribute(prefix + '-bind-resources') + " sib-form");
      if (form) {
        form.setAttribute('data-src', element.component.resourceId.replace('members/', ''));
      }
    }

    //- Allow to put user on a targetted search field
    if (element.getAttribute(prefix + '-bind-user2input')) {
      element.querySelector(element.getAttribute(prefix + '-bind-user2input')).value = user['@id'];
    }

    //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
    if (element.getAttribute(prefix + '-widgets-multiple') !== null) {
      element.querySelectorAll('div > sib-display').forEach((el) => {
        el.setAttribute(prefix + '-widgets', "");
      });
    }
  }

  //- This function is hooked every time a sib-something with prefix+"-widgets" is populated
  element.querySelectorAll('[' + prefix + '-widgets]').forEach((elementChild) => {
    elementChild.addEventListener('populate', () => {
      recursiveAdaptWidgets(prefix, elementChild, user);
    });
  });
}

// auxiliary function closes the user profile menu
function closeUserControls() {
  let userControls = document.querySelector('#user-controls');
  if (userControls) userControls.removeAttribute("open");
}

function closeLeftMenu() {
  let leftMenu = document.querySelector('#main__menu');
  if (leftMenu) leftMenu.removeAttribute("open");
}

function closeRightMenu() {
  let rightMenu = document.querySelectorAll('.jsRightMenu');
  if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) {
    Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
    Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
  }
}

function openRightMenu() {
  let rightMenu = document.querySelectorAll('.jsRightMenu');
  Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
  Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
}

document.addEventListener('DOMContentLoaded', function (event) {
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));

  //- View change event
  window.addEventListener('navigate', (event) => {
    closeLeftMenu();
    closeUserControls();
  });

  //- Toggle sub-menus
  menuWrappers.forEach(menuWrapper => {
    const menu = menuWrapper.querySelector('.menu');
    menu.addEventListener('click', e => {
      menuWrapper.classList.toggle('is-closed');
    });
  });

  //- Watch every sib-forms & update data-src of linked sib-display
  document.querySelectorAll('sib-form').forEach(function (el) {
    el.addEventListener("save", function (event) {
      //clear cache on this resource
      //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
      if (el.component.resource != null) el.component.resource.clearCache();

      // if of the edited resource || id of the container of the created resource
      const resourceId = event.detail.resource['@id'] || el.dataset.src;

      //update all displays which use this resource
      Array.from(document.querySelectorAll('sib-display'))
        .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
        .forEach(e => e.dataset.src = e.dataset.src); // and update them
    });
  });

  document.querySelector('sib-auth').getUser().then(user => {
    if (user !== null) {
      document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
      // Hide login button if already logged
      document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
      // Set current user id on set-user-id of sib-display
      recursiveAdaptWidgets("hd-inherit", document, user);
      for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
        leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
      }
    }
  }).catch(error => console.log(error));

  // Document -> close menu
  document.addEventListener("click", event => {
    if (!event.target.closest('#user-controls')) {
      closeUserControls();
    }
    if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
      closeLeftMenu();
    }
    if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
      closeRightMenu();
    }
  });

  document.querySelector('#toggleMainMenu').addEventListener('click', event => {
    let leftMenu = document.querySelector('#main__menu');
    if (leftMenu.hasAttribute('open')) {
      closeLeftMenu();
    } else {
      leftMenu.setAttribute('open', '');
    }
  });

  Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
    el.addEventListener('click', event => {
      openRightMenu();
    });
  });

  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
  rightMenus.forEach(rightMenu => {
    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
    btnRightMenu.addEventListener('click', e => {
      if (rightMenu.hasAttribute('open')) {
        closeRightMenu();
      } else {
        openRightMenu();
      }
    })
  });

  // listen for keypress
  document.onkeydown = (e) => {
    e = e || window.event;
    if (e.key === "Escape" || e.key === "Esc") {
      closeUserControls();
      closeLeftMenu();
      closeRightMenu();
    }
  };

});