import { useEffect } from "react";
import { NewHighlight, Highlight } from "../components/Highlight";
import { ScrollLink } from "../components/ScrollLink";
import { openAndCloseAndScroll, openAndScroll } from "../components/openAndScroll";


export function SafetySidebar(){
    let numsBig = ["Role", "Checks", "Lab", "BiosafetyH", "BiosecurityH", "BioethicsH"]
    let numsSub = [ "BS1", "BS2"]
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
      const handleScroll = () => {
        for(let idx in numsSub){
          
            const item = numsSub[idx];
            let ind = numsSub.findIndex((e) => e == item)
            let subdi = "newsubtitle" + ind 

            console.log("We are looking at 'item' = " + numsSub[idx])
            console.log("ind is: " + ind)
            console.log("subdi is: " + subdi)
            console.log("we use " +  document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
            NewHighlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
        }    
        for(let idx in numsBig){
          
          const item = numsBig[idx];
          let ind = numsBig.findIndex((e) => e == item)
          let subdi = "subtitle" + ind 

          console.log("We are looking at 'item' = " + numsBig[idx])
          console.log("ind is: " + ind)
          console.log("subdi is: " + subdi)
          console.log("we use " +  document.getElementById(item)?.id + " and " + document.getElementById(subdi)?.id)
          Highlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
          }       
        console.log("function HighlightCheck")
    }
      /* console.log(nums) */


    return(
        <div className="col-2 d-none d-lg-block">
            <br/>
            <div className="sticky-top">
            <nav className="sidebar">
            <div> 
                <a onClick={openAndCloseAndScroll({ it: "tab-Role", scrollTarget: "Role", close: ["Bioethics", "Biosafety", "Biosecurity"]})}>
                    <div id="subtitle0" className="detail-sideitem">
                        <div id="parent-Role" className="sideitem">
                            <summary>Role in iGem</summary>
                        </div>
                    </div>
                </a>
            </div>
            <div> 
                <a onClick={openAndCloseAndScroll({ it: "tab-Checks", scrollTarget: "Checks", close: ["Bioethics", "Biosafety", "Biosecurity"] })}>
                    <div id="subtitle1" className="detail-sideitem">
                        <div id="parent-Checks" className="sideitem">
                            <summary>Check-Ins</summary>
                        </div>
                    </div>
                </a>
            </div>
            <div> 
                <a onClick={openAndCloseAndScroll({ it: "tab-Lab", scrollTarget: "Lab", close: ["Bioethics", "Biosafety", "Biosecurity"] })}>
                    <div id="subtitle2" className="detail-sideitem">
                        <div id="parent-Lab" className="sideitem">
                            <summary>Our Lab</summary>
                        </div>
                    </div>
                </a>
            </div>            
                <div> 
                    {/* Fznktioniert:  <a onClick={openThem({it: "tab-Cystic-Fibrosis"})}  > */}
                        <div className="detail-sideitem" id="subtitle3">
                            <div id="parent-Biosafety" className="sideitem">
                              <a  onClick={openAndCloseAndScroll({ it: "tab-Biosafety", scrollTarget: "Biosafety", close: ["Bioethics", "Biosecurity"] })}><summary>Biosafety</summary></a> 
                                <span id="tab-Biosafety" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <li id="newsubtitle0"><ScrollLink label="Mechanism" targetId="BS1"/></li>
                                        <li id="newsubtitle1"><ScrollLink label="Delivery" targetId="BS2"/></li>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                </div> 
                <div> 
                    {/* Fznktioniert:  <a onClick={openThem({it: "tab-Cystic-Fibrosis"})}  > */}
                        <div className="detail-sideitem" id="subtitle4">
                            <div id="parent-Biosecurity" className="sideitem">
                              <a  onClick={openAndCloseAndScroll({ it: "tab-Biosecurity", scrollTarget: "Biosecurity", close: ["Biosafety", "Bioethics"]})}><summary>Biosecurity</summary></a> 
                                <span id="tab-Biosecurity" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <li><ScrollLink label="Our Project" targetId="BSec1"/></li>
                                        <li><ScrollLink label="Risk Assesment" targetId="BSec2"/></li>
                                        <li><ScrollLink label="Managing Risks" targetId="BSec3"/></li>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                </div> 
                <div> 
                        <div className="detail-sideitem"  id="subtitle5">
                            <div id="parent-Bioethics" className="sideitem">
                              <a onClick={openAndCloseAndScroll({ it: "tab-Bioethics", scrollTarget: "Bioethics", close: ["Biosafety", "Biosecurity"]})}><summary>Bioethics</summary></a> 
                                <span id="tab-Bioethics" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <li><ScrollLink label="Gene Therapy" targetId="BE1"/></li>
                                        <li><ScrollLink label="Primary Cells" targetId="BE2"/></li>
                                        <li><ScrollLink label="Consent and Guidelines" targetId="BE3"/></li>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                </div> 
            </nav>   
        <br/>
        <div className="col" style={{display: "flex", alignItems: "right"}}>
            <a href='#' className="backtotop">
                Back to Top &#8593;
            </a>
        </div>  
            </div>
        </div>
        
    )
}