import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "./sections";
export function Safety() {
    const location = useLocation();

    useEffect(() => {
      const params = new URLSearchParams(location.search);
      const collapseId = params.get('collapseId');
      const tabId = params.get('tab');
      const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
  
      // Open the tab specified by tabId (and subTab if nested)
      if (tabId) {
        if (subTabId) {   
          // If subTab is provided, open the nested tab
          openNestedTab(tabId, subTabId);
        } else {
          // Otherwise, just open the main tab
          openTab(tabId);
        }
      }
  
      // Scroll to the section specified by collapseId after opening the tab
      if (collapseId) {
        handleScrollToCollapse(collapseId);
      }
  
      // Open the tab from another page
      if (tabId) {
        openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
      }
    }, [location.search]);
  
  return (
    <>
      <Section title="Role in iGem" id="Role">
        <LoremMedium/>
      </Section>
      <Section title="Check-Ins" id="Check-Ins">
        <LoremMedium/>
      </Section>
      <Section title="Our Lab" id="Our Lab">
        <LoremMedium/>
      </Section>
      <Section title="Biosafety" id="Biosafety">
        <Subesction title="Mechanism" id="Biosafety1">
          <LoremMedium/>
        </Subesction>
        <Subesction title="Delivery" id="Biosafety2">
          <LoremMedium/>
        </Subesction>
      </Section>
      <Section title="Biosecurity" id="Biosecurity">
        <Subesction title="Our Project" id="Biosecurity1">
          <LoremMedium/>
        </Subesction>
        <Subesction title="Risk Assesment" id="Biosecurity2">
          <LoremMedium/>
        </Subesction>
        <Subesction title="Managing Risks" id="Biosecurity3">
          <LoremMedium/>
        </Subesction>
      </Section>
      <Section title="Bioethics" id="Bioethics">
        <Subesction title="Gene Therapy" id="Bioethics1">
          <LoremMedium/>
        </Subesction>
        <Subesction title="Primary Cells" id="Bioethics2">
          <LoremMedium/>
        </Subesction>
        <Subesction title="Consent and Guidelines" id="Bioethics3">
          <LoremMedium/>
        </Subesction>
      </Section>
    </>
  );
}