
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
const Default = {
  scrollbarTheme: 'os-theme-light',
  scrollbarAutoHide: 'leave',
  scrollbarClickScroll: true,
};

async function loadComponent(elm, widget) {
  try {
    const response = await fetch(widget);
    const htmlText = await response.text();
    document.getElementById(elm).innerHTML = htmlText;

    if (elm=='app-sidebar') {
      const currentPage = window.location.pathname
          .split("/")
          .pop();
      const menuLinks = document.querySelectorAll(".nav-link");
      menuLinks.forEach(link => {
          const linkPage = link.getAttribute("href");
          if (linkPage === currentPage) {
              link.classList.add("active");
          }
      });
    }

  } catch (error) {
    console.error('Error loading the HTML component:', error);
  }
}

loadComponent('app-header', './widgets/app_header.html');
loadComponent('app-sidebar', './widgets/app_sidebar.html');
loadComponent('app-footer', './widgets/app_footer.html');

document.addEventListener("DOMContentLoaded", function () {

  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);

  // Disable OverlayScrollbars on mobile devices to prevent touch interference
  const isMobile = window.innerWidth <= 992;

  if (
    sidebarWrapper &&
    OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
    !isMobile
  ) {
    OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
      scrollbars: {
        theme: Default.scrollbarTheme,
        autoHide: Default.scrollbarAutoHide,
        clickScroll: Default.scrollbarClickScroll,
      },
    });
  }

});