/* global React, ReactDOM, Nav, Footer, Home, Services, SeniorMoving, About, Contact, Quote, SobiTweaks, TWEAK_DEFAULTS, useTweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

function parseHash() {
  const h = window.location.hash || "#/";
  const [path, query] = h.slice(1).split("?");
  const params = {};
  if (query) {
    query.split("&").forEach(pair => {
      const [k, v] = pair.split("=");
      if (k) params[decodeURIComponent(k)] = decodeURIComponent(v || "");
    });
  }
  return { path: path || "/", route: `#${path || "/"}`, params };
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [{ path, route, params }, setRoute] = useStateApp(parseHash());

  useEffectApp(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  let page;
  switch (path) {
    case "/services":     page = <Services params={params} />; break;
    case "/senior-moving": page = <SeniorMoving />; break;
    case "/about":        page = <About />; break;
    case "/contact":      page = <Contact />; break;
    case "/quote":        page = <Quote />; break;
    case "/":
    default:              page = <Home tweaks={tweaks} />;
  }

  return (
    <>
      <Nav route={route} />
      <div key={path}>{page}</div>
      <Footer />
      <SobiTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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