import { useEffect } from "react";
import { Highlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
export function EngSide(){
    let nums = [ "del1"]
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      }, []);
      const handleScroll = () => {
          for(let idx in nums){
            console.log("We are looking at 'item' = " + nums[idx])
              const item = nums[idx];
              let ind = nums.findIndex((e) => e == item)
              console.log("ind is: " + ind)
              let subdi = "subtitle" + 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={openThem({it: "our-cycle"})}>
                        <div className="detail-sideitem">
                            <div id="parent-our-cycle" className="sideitem">
                                <summary>Our Cycle</summary>
                                <span id="our-cycle" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <a href="#"><li>Iteration 1</li></a>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openThem({it: "proof-of-concept"})}>
                        <div className="detail-sideitem">
                            <div id="parent-proof-of-concept" className="sideitem">
                                <summary>Proof Of Concept</summary>
                                <span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <a href="#"><li>Iteration 1</li></a>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openThem({it: "pe-systems"})}>
                        <div className="detail-sideitem">
                            <div id="parent-pe-systems" className="sideitem">
                                <summary>PE Systems</summary>
                                <span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <a href="#"><li>Iteration 1</li></a>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openThem({it: "nikase"})}>
                        <div className="detail-sideitem">
                            <div id="parent-nikase" className="sideitem">
                                <summary>Nikase</summary>
                                <span id="nikase" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <a href="#"><li>Iteration 1</li></a>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openThem({it: "pegrna"})}>
                        <div className="detail-sideitem">
                            <div id="parent-pegrna" className="sideitem">
                                <summary>pegRNA</summary>
                                <span id="pegrna" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <a href="#"><li>Iteration 1</li></a>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div> 
                <div> 
                    <a onClick={openThem({it: "delivery"})}>
                        <div className="detail-sideitem">
                            <div id="parent-delivery" className="sideitem">
                                <summary>Delivery</summary>
                                <span id="delivery" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                     <li><a href="#del1">
                                                <span id="subtitle0" className='sideitem'>Iteration 1</span>
                                        </a></li>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div>   
                <div> 
                    <a onClick={openThem({it: "references"})}>
                        <div className="detail-sideitem">
                            <div id="parent-references" className="sideitem">
                                <summary>References</summary>
                                <span id="references" className="sidesubtab" style={{display: "none"}}>
                                     <ul>
                                        <li><a href="#subtitle1">
                                                <span id="" className='sideitem'>Iteration 1</span>
                                        </a></li>
                                        <a href="#"><li>Iteration 2</li></a>
                                        <a href="#"><li>Iteration 3</li></a>
                                    </ul>
                                </span>
                            </div> 
                        </div>
                    </a>
                </div>  
            </nav>   
        <br/>
        <div className="col" style={{display: "flex", alignItems: "right"}}>
            <a href='#' className="backtotop">
                Back to Top &#8593;
            </a>
        </div>  
            </div>
        </div>
        
    )
}




/* function SideItemEng({hesh, num}:{hesh: string; num: number}){
    let subdi = "subtitle" + num
    let openmore = stringToSlug(hesh) 
    console.log("openmore: " + openmore)
    return(
        <div> 
            <a onClick={openThem({it: openmore})}>
                <div className="detail-sideitem">
                <div id={subdi} className="sideitem">
                    <summary>{hesh}</summary>
                    <span id={openmore} className="sidesubtab" style={{display: "none"}}>
                        <ul>
                            <li>Other</li>
                        </ul>
                    </span>
                </div> 
                </div>
            </a>
        </div>   
    )
}
 */