export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
    let TopDistance = 150; 
    console.log("Starting highlight check...")
    console.log("here come el...")
    console.log(el)
    console.log("here comes subtitle...")
    console.log(subtitle)
    if (el != null && subtitle != null){
/*         console.log("here comes el...")
        console.log(el)
        console.log(el.getBoundingClientRect()) */
        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
            subtitle.style.color = "blue";
            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
            subtitle.style.borderColor = "#850F78"; 
            subtitle.style.marginLeft = "10px"; 
            subtitle.style.paddingRight = "10px";
            subtitle.style.fontWeight = "900";

/*                 console.log("subtitle: ",subtitle)
            console.log("style: ", subtitle.style)
            console.log("color: ",subtitle.style.color)
            console.log("backcolor: ",subtitle.style.backgroundColor)    */     
        }
        else{
            subtitle.style.color = "white";
            subtitle.style.marginLeft = "0"; 
            subtitle.style.backgroundColor = "";
        }
    }
    
  }

  export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
    let TopDistance = 150; 

    if (el != null && subtitle != null){

        if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
   
            if(subtitle.childNodes[0] != undefined){
                console.log("if true: ");
                console.log(subtitle.childNodes[0]);
                (subtitle.childNodes[0] as HTMLElement).classList.add("active-sideitem");
                if(subtitle.childNodes[0].childNodes[1] != undefined){
                    console.log("test: ")
                    console.log(subtitle.childNodes[0].childNodes[1]);
                    (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "block";
                }
               } 
        }
        else{
            subtitle.style.color = "#850F78";
            subtitle.style.backgroundColor = "";
            subtitle.classList.remove("subtitle-active");
            if(subtitle.childNodes[0] != undefined){
                console.log("if true: ");
                console.log(subtitle.childNodes[0]);
                (subtitle.childNodes[0] as HTMLElement).classList.remove("active-sideitem");
                if(subtitle.childNodes[0].childNodes[1] != undefined){
                    console.log("test: ")
                    console.log(subtitle.childNodes[0].childNodes[1]);
                    (subtitle.childNodes[0].childNodes[1] as HTMLElement).style.display = "none";
                }
               }
                
        }
    }
    
  }