const { useState, useEffect, useRef } = React;

function Nav() {
  const { t } = window.useT();
  const [scrolled, setScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [onDark, setOnDark] = useState(() => !!document.querySelector('.product-showcase'));
  const [menuOpen, setMenuOpen] = useState(false);
  const lastY = useRef(0);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      const delta = y - lastY.current;
      if (Math.abs(delta) > 4) {
        if (delta > 0 && y > 80) setHidden(true);
        else if (delta < 0) setHidden(false);
        lastY.current = y;
      }
      const showcase = document.querySelector('.product-showcase');
      const supporters = document.querySelector('.supporters');
      const onShowcase = showcase && y >= showcase.offsetTop && y < showcase.offsetTop + showcase.offsetHeight;
      const onSupporters = supporters && y >= supporters.offsetTop && y < supporters.offsetTop + supporters.offsetHeight;
      setOnDark(!!(onShowcase || onSupporters));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  return (
    <>
      <header className={`nav ${scrolled || menuOpen ? 'scrolled' : ''} ${hidden && !menuOpen ? 'nav-hidden' : ''} ${onDark && !menuOpen ? 'nav-on-dark' : ''}`}>
        <div className="container nav-inner">
          <a href="/" className="logo" onClick={close}>
            dent<b>son</b>
          </a>
          <nav className="nav-links">
            <a href="/#product" className="nav-link">{t('nav.product')}</a>
            <a href="/#jobs" className="nav-link">{t('nav.jobs')}</a>
            <a
              href="/waitlist/"
              className="nav-tab nav-tab-cta"
            >
              {t('nav.waitlist')}
            </a>
          </nav>
          <button
            className={`burger ${menuOpen ? 'open' : ''}`}
            onClick={() => setMenuOpen(v => !v)}
            aria-label="Menu"
          >
            <span></span>
            <span></span>
          </button>
        </div>
      </header>
      <div className={`mobile-menu ${menuOpen ? 'open' : ''}`}>
        <nav>
          <a href="/#product" onClick={close}>{t('nav.product')}</a>
          <a href="/#jobs" onClick={close}>{t('nav.jobs')}</a>
          <a
            href="/waitlist/"
            onClick={close}
          >
            {t('nav.waitlist')}
          </a>
        </nav>
      </div>
    </>
  );
}

window.Nav = Nav;