import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { App } from "./App";
import { PERF } from "./lib/perfSettings";
import { installFullHeight } from "./lib/fullHeight";
import { applySkin } from "./lib/skins";
import "./styles/app.css";
import "./styles/mobile.css";
import "./styles/room.css";
import "./styles/tippen.css";
import "./styles/clock.css";

// Before the first render, so nothing ever paints in the wrong skin's colours.
applySkin();
installFullHeight();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// Registered after load so it never competes with the first paint. It is what makes
// iOS offer "Zum Home-Bildschirm" as an app rather than a bookmark; see public/sw.js
// for what it does and deliberately does not cache.
//
// Not under `?pi=1`: that is the kiosk, which *is* the server. There is nothing to
// install, and the worker only adds a fetch handler (and a `cache.put` of every response)
// in front of requests that are already on localhost. Any worker an earlier visit left
// behind is removed so the kiosk stops paying for it.
if ("serviceWorker" in navigator && import.meta.env.PROD) {
  window.addEventListener("load", () => {
    if (!PERF.serviceWorker) {
      void navigator.serviceWorker
        .getRegistrations()
        .then((registrations) => Promise.all(registrations.map((r) => r.unregister())))
        .catch(() => undefined);
      return;
    }
    void navigator.serviceWorker.register("/sw.js").catch(() => {
      // A plain http:// origin that is not localhost cannot register one. The app
      // works exactly the same, it just cannot be installed.
    });
  });
}