export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
    const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        console.log("it classname: " + document.getElementById(it)?.className);
        console.log("it: " + it);
        
        let contenttabid = "tab-" + it; 
        let parent = "parent-" + it; 
        console.log("we want to open " + it + " and " + contenttabid);
        let sideitems = document.getElementsByClassName("sideitem"); 
        let subtabs = document.getElementsByClassName("sidesubtab");
        let contenttabs = document.getElementsByClassName("enginneeringtab");
        
        // Verstecke alle Subtabs und Content-Tabs
        for (let i = 0; i < subtabs.length; i++) {
            (subtabs[i] as HTMLElement).style.display = "none";
            console.log("Hiding sidebar subtab...");
        }
        for (let i = 0; i < contenttabs.length; i++) {
            (contenttabs[i] as HTMLElement).style.display = "none";
            console.log("Hiding content tab...");
        }
        for (let i = 0; i < sideitems.length; i++) {
            (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
            console.log("Hiding sidebar subtab...");
        }
        
        // 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";
  
        // Update der URL
        const newUrl = `?tab=${it}`;
        window.history.pushState({ tab: it }, '', newUrl);
  
        // Scrolle zu der angegebenen ID, falls vorhanden
        if (scrollToId && document.getElementById(scrollToId)) {
            console.log("Scrolling to: " + scrollToId);
            document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
        }
    };
    return gotoandopen;
  }