export function openThem({ it, scrollToId }: { it: string; scrollToId?: string }) {
  const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
    updateTabs(it, scrollToId);
    
    // Update der URL
    const newUrl = `?tab=${it}`;
    window.history.pushState({ tab: it }, '', newUrl);
  };
  
  return gotoandopen;
}

function updateTabs(it: string, scrollToId?: string) {
  let contenttabid = "tab-" + it;
  let parent = "parent-" + it;

  // Verstecke alle Subtabs und Content-Tabs
  const subtabs = document.getElementsByClassName("sidesubtab");
  const contenttabs = document.getElementsByClassName("enginneeringtab");
  const sideitems = document.getElementsByClassName("sideitem");

  for (let i = 0; i < subtabs.length; i++) {
    (subtabs[i] as HTMLElement).style.display = "none";
  }
  for (let i = 0; i < contenttabs.length; i++) {
    (contenttabs[i] as HTMLElement).style.display = "none";
  }
  for (let i = 0; i < sideitems.length; i++) {
    (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
  }

  // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
  document.getElementById(it)!.style.display = "block";
  document.getElementById(parent)!.classList.add("active-sideitem");
  document.getElementById(contenttabid)!.style.display = "block";

  // Scrolle zu der angegebenen ID, falls vorhanden
  if (scrollToId && document.getElementById(scrollToId)) {
    document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
    console.log(`Scroll to ${scrollToId}`)
  }
}

// Füge einen Event Listener für `popstate` hinzu
window.addEventListener('popstate', (event) => {
  if (event.state) {
    const tab = event.state.tab;
    updateTabs(tab);
  }
});