/* global React, ReactDOM, Nav, Footer, ScheduleModal, HomePage, ServiciosPage, ServicioDetail, RedPage, PlanesPage, ContactoPage, LegalPage, NotFound */
const { useState, useEffect } = React;

function useHashRoute() {
  const get = () => {
    const h = window.location.hash || "#/";
    return h.replace(/^#/, "") || "/";
  };
  const [route, setRoute] = useState(get());
  useEffect(() => {
    const onHash = () => {
      setRoute(get());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const navigate = (path) => { window.location.hash = "#" + path; };
  return [route, navigate];
}

function App() {
  const [route, navigate] = useHashRoute();
  const [scheduleOpen, setScheduleOpen] = useState(false);
  const openSchedule = () => setScheduleOpen(true);

  let page;
  if (route === "/" || route === "") page = <HomePage navigate={navigate} openSchedule={openSchedule} />;
  else if (route === "/servicios") page = <ServiciosPage navigate={navigate} openSchedule={openSchedule} />;
  else if (route.startsWith("/servicios/")) {
    const slug = route.replace("/servicios/", "");
    page = <ServicioDetail slug={slug} navigate={navigate} openSchedule={openSchedule} />;
  }
  else if (route === "/red") page = <RedPage navigate={navigate} openSchedule={openSchedule} />;
  else if (route === "/planes") page = <PlanesPage navigate={navigate} openSchedule={openSchedule} />;
  else if (route === "/contacto") page = <ContactoPage navigate={navigate} openSchedule={openSchedule} />;
  else if (route === "/aviso-legal") page = <LegalPage kind="aviso-legal" navigate={navigate} />;
  else if (route === "/privacidad") page = <LegalPage kind="privacidad" navigate={navigate} />;
  else if (route === "/cookies") page = <LegalPage kind="cookies" navigate={navigate} />;
  else page = <NotFound navigate={navigate} />;

  return (
    <React.Fragment>
      <Nav route={route} navigate={navigate} openSchedule={openSchedule} />
      {page}
      <Footer navigate={navigate} openSchedule={openSchedule} />
      <ScheduleModal open={scheduleOpen} onClose={() => setScheduleOpen(false)} />
    </React.Fragment>
  );
}

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