import { useIsMounted } from "@contember/react-utils";
import { useDialog, Stack, Heading, Button } from "@contember/ui";
import { useRef, useCallback, useEffect, useState } from "react";
import { outdatedApplicationDictionary } from "./outdatedApplicationDictionary.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMessageFormatter } from "../../i18n/useMessageFormatter.js";
const postponeTimeoutMs = 6e4 * 5;
const checkIntervalMs = 3e4;
const OutdatedApplicationChecker = () => {
  const modal = useDialog();
  const isOutdated = useIsOutdated();
  const isOpen = useRef(false);
  const isMounted = useIsMounted();
  const openDialog = useCallback(async () => {
    if (isOpen.current || !isMounted.current) {
      return;
    }
    isOpen.current = true;
    const result = await modal.openDialog({
      content: ({
        resolve
      }) => /* @__PURE__ */ jsx(OutdatedApplicationDialog, {
        onReload: () => resolve(true),
        onPostpone: () => resolve(false)
      })
    });
    isOpen.current = false;
    if (!isMounted.current) {
      return;
    }
    if (result) {
      window.location.reload();
    } else {
      setTimeout(openDialog, postponeTimeoutMs);
    }
  }, [isMounted, modal]);
  useEffect(() => {
    if (!isOutdated) {
      return;
    }
    openDialog();
  }, [isOutdated, openDialog]);
  return null;
};
const OutdatedApplicationDialog = ({
  onReload,
  onPostpone
}) => {
  const formatMessage = useMessageFormatter(outdatedApplicationDictionary);
  return /* @__PURE__ */ jsxs(Stack, {
    direction: "vertical",
    children: [/* @__PURE__ */ jsx(Heading, {
      children: formatMessage("outdatedApplication.heading")
    }), /* @__PURE__ */ jsx("p", {
      children: formatMessage("outdatedApplication.text")
    }), /* @__PURE__ */ jsxs(Stack, {
      direction: "horizontal",
      gap: "small",
      justify: "end",
      children: [/* @__PURE__ */ jsx(Button, {
        onClick: onReload,
        intent: "success",
        children: formatMessage("outdatedApplication.reloadButton")
      }), /* @__PURE__ */ jsx(Button, {
        onClick: onPostpone,
        intent: "warn",
        children: formatMessage("outdatedApplication.postponeButton")
      })]
    })]
  });
};
const getVersionFromDocument = (node) => {
  const meta = node.querySelector("meta[name=contember-build-version]");
  return meta?.content;
};
const useFetchVersion = () => {
  return useCallback(async () => {
    try {
      const result = await (await fetch(window.location.href)).text();
      const html = document.createElement("html");
      html.innerHTML = result;
      return getVersionFromDocument(html);
    } catch (e) {
      console.error(e);
      return void 0;
    }
  }, []);
};
const useIsOutdated = () => {
  const [initialVersion] = useState(() => {
    return getVersionFromDocument(document.head);
  });
  const [isOutdated, setIsOutdated] = useState(false);
  const fetchVersion = useFetchVersion();
  const checkVersion = useCallback(async () => {
    if (document.hidden) {
      return;
    }
    const version = await fetchVersion();
    if (version !== initialVersion) {
      setIsOutdated(true);
    }
  }, [fetchVersion, initialVersion]);
  const shouldCheck = !!initialVersion && !isOutdated;
  useEffect(() => {
    if (!shouldCheck) {
      return;
    }
    const handle = setInterval(checkVersion, checkIntervalMs);
    return () => clearInterval(handle);
  }, [checkVersion, shouldCheck]);
  useEffect(() => {
    if (!shouldCheck) {
      return;
    }
    document.addEventListener("visibilitychange", checkVersion);
    return () => document.removeEventListener("visibilitychange", checkVersion);
  }, [checkVersion, shouldCheck]);
  return isOutdated;
};
export {
  OutdatedApplicationChecker
};
//# sourceMappingURL=OutdatedApplicationChecker.js.map
