import { useEffect } from "react";
import { useDraft } from "../../../../../use-page-data.js";
function useFontWatcher() {
  const draft = useDraft();
  const themeUsed = draft.previewTheme ?? draft.site.theme;
  useEffect(() => {
    buildHtmlHeadLinks();
    updateLinks(themeUsed.typography);
  }, [themeUsed.typography]);
  return themeUsed.typography;
}
function updateLinks(typography) {
  for (const font of ["body", "heading"]) {
    if (typography[font].type === "google") {
      const linkElement = document.getElementById(`stylesheet-font-${font}`);
      linkElement.href = `https://fonts.googleapis.com/css2?family=${typography[font].family.replace(
        / /g,
        "+"
      )}&display=swap`;
    }
  }
}
function buildHtmlHeadLinks() {
  for (const font of ["body", "heading"]) {
    const id = `stylesheet-font-${font}`;
    if (document.getElementById(id)) {
      document.getElementById(id)?.remove();
    }
    const linkElementBody = document.createElement("link");
    linkElementBody.rel = "stylesheet";
    linkElementBody.id = id;
    document.head.appendChild(linkElementBody);
  }
}
export {
  useFontWatcher
};
//# sourceMappingURL=use-font-watcher.js.map
