import { useEffect, useState, ComponentType } from "react"

const ROW_OFFSET = 51

const SECTION_COUNT = 4

export function withAboutScrollNav(Component: ComponentType<any>): ComponentType {

return function WithAboutScrollNav(props: any) {

const [activeIndex, setActiveIndex] = useState(0)

useEffect(() => {

function update() {

const scrollTop = window.scrollY || 0

const scrollMax =

document.documentElement.scrollHeight - window.innerHeight

if (scrollMax <= 0) return

const progress = Math.min(1, scrollTop / scrollMax)

setActiveIndex(

Math.min(Math.floor(progress * SECTION_COUNT), SECTION_COUNT - 1)

)

}

window.addEventListener("scroll", update, { passive: true } as any)

window.addEventListener("resize", update)

update()

return () => {

window.removeEventListener("scroll", update)

window.removeEventListener("resize", update)

}

}, [])

return (

<Component

{...props}

style={{

...props.style,

transform: `translateY(-${activeIndex * ROW_OFFSET}px)`,

transition: "transform 0.35s ease",

willChange: "transform",

}}

/>

)

}

}