import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { App } from "./app/App";
import { flushOutbox } from "./lib/offline";
import "./styles.css";

const queryClient = new QueryClient();

function syncOfflineChanges() {
  void flushOutbox().then((synced) => {
    if (!synced) return;
    void queryClient.invalidateQueries({ queryKey: ["items"] });
    void queryClient.invalidateQueries({ queryKey: ["lists"] });
  });
}

window.addEventListener("online", syncOfflineChanges);
window.addEventListener("appnetworkchange", (event) => {
  if ((event as CustomEvent<{ online: boolean }>).detail.online) syncOfflineChanges();
});
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") syncOfflineChanges();
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>,
);