import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
import { BackUp } from "../components/Buttons";
import { useNavigation } from "../utils";
export function EngSide(){
let nums = [ "cyc1", "cyc2", "cyc3", "cyc4", "pe1", "pe2", "pe3", "nik1", "nik2", "nik3", "nik4", "nik5", "nik6",
"peg1", "peg2", "peg3", "peg4", "peg5", "peg6", "del1", "del2", "del3", "del4", "del5"]
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) */
NewHighlight({el: document.getElementById(item)!}, {subtitle: document.getElementById(subdi)!});
}
console.log("function HighlightCheck")
}
console.log(nums)
const {goToPageWithTabAndScroll} = useNavigation();
return(
<div className="col-2 d-none d-lg-block" >
<br/>
<div className="sticky-top">
<nav className="sidebar" id="eng-sidebar">
<div>
<a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
<div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "proof-of-concept", scrollToId: "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>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc1"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc2"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc3"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc4"})}>
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "pe-systems", scrollToId: "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>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "PE Systems", scrollToId: "pe1"})}>
<span id="subtitle4" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "PE Systems", scrollToId: "pe2"})}>
<span id="subtitle5" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "PE Systems", scrollToId: "pe3"})}>
<span id="subtitle6" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "pegrna", scrollToId: "pegRNA"})}>
<div className="detail-sideitem">
<div id="parent-pegrna" className="sideitem">
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg7"})}>
<span id="subtitle13" className='sideitem'>Iteration 7</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "nikase", scrollToId: "Nikase"})}>
<div className="detail-sideitem">
<div id="parent-nikase" className="sideitem">
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
<li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
<span id="subtitle14" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
<span id="subtitle15" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
<span id="subtitle16" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
<span id="subtitle17" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
<span id="subtitle18" className='sideitem'>Iteration 5</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
<span id="subtitle19" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "delivery", scrollToId: "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 onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle21" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle22" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle23" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del4"})}>
<span id="subtitle24" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del5"})}>
<span id="subtitle25" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>
</div>
</div>
</a>
</div>
<div>
<a onClick={openThem({it: "references", scrollToId: "References"})}>
<div className="detail-sideitem">
<div id="parent-references" className="sideitem">
<summary>References</summary>
<span id="references" className="sidesubtab" style={{display: "none"}}>
</span>
</div>
</div>
</a>
</div>
</nav>
<BackUp></BackUp>
</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>
)
}
*/