function querySelectorParentChild(el, selector) {
  while(el !== document.body) {
    if(el.querySelector(selector)) {
      break;
    }
    el = el.parentNode;
  }
  return el.querySelector(selector);
}

document.addEventListener('DOMContentLoaded', function (event) {
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));

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

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

  //- Open/close menu on the right
  rightMenus.forEach(rightMenu => {
    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");

    btnRightMenu.addEventListener('click', e => {
      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
    })
  });

  //- Watch every sib-forms & update data-src of linked sib-display
  document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) {
    el.addEventListener("save", function() {
      let dataSrc = el.getAttribute('data-src');
      document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) {
        e.resource.clearCache();
      });
    });
  });

  document.querySelector('sib-auth').getUser().then(user => {
    if(user !== null) {
      // Hide login button if already logged
      document.querySelector('button[role="log in"]').style.display = 'none';
      // Set current user id on set-user-id of sib-display
      for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) {
        sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']);
      }

      for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
        sibForm.addEventListener('populate', () => {
          // BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
          document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label^="Leave"]').forEach((el)=>{
            querySelectorParentChild(el, 'sib-form[submit-button^="Join"]').style.display = "none";
          });
          for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) {
            for(option of select.options) {
              option.selected = (option.getAttribute('value') == '{"@id": "'+user['@id']+'"}');
            }
          }
        });
      }
      for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
        leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none"; // Hide Join button
      }
    }
  }).catch(error => console.log(error));


  
});