import { useLayoutEffect, useRef, useState } from 'react'
import { throttle } from 'lib/throttle'

const useHeaderOnScroll = () => {
  const [visible, setVisible] = useState(1)
  let prevScrollPos = useRef()
  let currScrollPos = useRef()

  useLayoutEffect(() => {
    prevScrollPos.current = window.pageYOffset

    const handleScroll = () => {
      currScrollPos.current = window.pageYOffset

      prevScrollPos.current > currScrollPos.current
        ? setVisible(1)
        : setVisible(0)

      prevScrollPos.current = currScrollPos.current
    }

    const throttledHandleScroll = throttle(handleScroll, 200)

    window.addEventListener('scroll', throttledHandleScroll)
    
    return () => window.removeEventListener('scroll', throttledHandleScroll)
  })

  return visible
}

export { useHeaderOnScroll }

const Header = () => {
  const visible = useHeaderOnScroll()

  return (
    <header className={clsx(styles.header, !visible && styles.headerHidden)}>
      <a href="/">
        <img src={Logo} alt="" className={styles.logoImg} />
      </a>
    </header>
  )
}