import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { registerSW } from "virtual:pwa-register";
import "./install";
import "./styles.css";
import { App } from "./App";
import { applyTheme } from "./theme";
import { captureShare } from "./share";

applyTheme();
captureShare();
registerSW({ immediate: true });
undoKeyboardShift();

/**
 * Browsers that do not resize the page for the on-screen keyboard (iOS Safari, older
 * Android) scroll the whole page up to show the input – and do not always scroll it back
 * when the keyboard closes, leaving the top bar (menu) out of reach. The app never
 * scrolls the page itself (only its panes), so any page offset is undone once the
 * visible area grows again.
 */
function undoKeyboardShift() {
  const vv = window.visualViewport;
  if (!vv) return;
  let last = vv.height;
  const reset = () => {
    const el = document.scrollingElement ?? document.documentElement;
    if (window.scrollY !== 0 || el.scrollTop !== 0 || document.body.scrollTop !== 0) {
      window.scrollTo(0, 0);
      el.scrollTop = 0;
      document.body.scrollTop = 0;
    }
  };
  vv.addEventListener("resize", () => {
    // Grown back (keyboard closed or closing): after the browser's own adjustment.
    if (vv.height > last + 1) {
      requestAnimationFrame(reset);
      setTimeout(reset, 350);
    }
    last = vv.height;
  });
  // Keyboard closed by leaving the input (no resize on some browsers).
  document.addEventListener("focusout", () =>
    setTimeout(() => {
      const a = document.activeElement;
      if (!a || !(a instanceof HTMLInputElement || a instanceof HTMLTextAreaElement || (a as HTMLElement).isContentEditable)) reset();
    }, 300),
  );
}

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