/* global React, ReactDOM */
const { useState, useEffect } = React;
const { Wordmark, Hero, Creds, About, Priorities, News, GetInvolved, Footer, Modals } = window;

const NAV_LINKS = [
  ["About", "#about"],
  ["Priorities", "#priorities"],
  ["News", "#news"],
  ["Get Involved", "#involved"],
];

function Nav({ active }) {
  const [solid, setSolid] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > window.innerHeight * 0.82);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menu ? "hidden" : "";
  }, [menu]);
  return (
    <>
      <nav className={"nav" + (solid ? " is-solid" : "")}>
        <div className="nav__inner">
          <Wordmark />
          <div className="nav__links">
            {NAV_LINKS.map(([label, href]) => (
              <a key={href} href={href}
                 className={"nav__link" + (active === href.slice(1) ? " is-active" : "")}>{label}</a>
            ))}
            <a className="btn btn--sm nav__cta" href={window.MM.donateUrl} target="_blank" rel="noopener">Donate</a>
          </div>
          <button className="nav__toggle" aria-label="Open menu" onClick={() => setMenu(true)}>
            <span /><span /><span />
          </button>
        </div>
      </nav>

      <div className={"mobile-menu" + (menu ? " is-open" : "")}>
        <div className="mobile-menu__top">
          <Wordmark dark />
          <button className="mobile-menu__close" aria-label="Close menu" onClick={() => setMenu(false)}>&times;</button>
        </div>
        <div className="mobile-menu__links">
          {NAV_LINKS.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setMenu(false)}>{label}</a>
          ))}
        </div>
        <a className="btn btn--lg mobile-menu__cta" href={window.MM.donateUrl} target="_blank" rel="noopener"
           onClick={() => setMenu(false)}>Donate Today</a>
      </div>
    </>
  );
}

function App() {
  const [active, setActive] = useState("top");

  /* scroll-spy for active nav link */
  useEffect(() => {
    const ids = ["about", "priorities", "news", "involved"];
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.35;
      let cur = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav active={active} />
      <main>
        <Hero heroStyle="overlay" />
        <Creds />
        <About />
        <Priorities />
        <News />
        <GetInvolved />
      </main>
      <Footer />
      <Modals />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);