"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getFontSize = getFontSize;
exports.useFontSizeObserver = void 0;
var _react = require("react");
let hookUsagesCount = 0;
let fontSizeElement = null;
function getFontSizeElement() {
  if (!fontSizeElement) {
    fontSizeElement = document.createElement('span');
    fontSizeElement.id = 'font-size-change-tracking-element';
    fontSizeElement.innerText = 'font size change tracking';
    fontSizeElement.style.visibility = 'hidden';
    fontSizeElement.style.position = 'absolute';
    fontSizeElement.style.top = '-9999px';
    fontSizeElement.style.left = '-9999px';
    document.body.appendChild(fontSizeElement);
  }
  return fontSizeElement;
}
function getFontSize(element) {
  return parseFloat(window.getComputedStyle(element).fontSize);
}

/** Track browser font-size changes, updated via Chrome's settings. (Settings -> Appearance -> Font-size) */
const useFontSizeObserver = () => {
  const [size, setSize] = (0, _react.useState)({
    previousSize: 0,
    currentSize: 0
  });
  const fontSizeElementRef = (0, _react.useRef)();
  (0, _react.useLayoutEffect)(() => {
    hookUsagesCount++;
    if (!fontSizeElementRef.current) {
      fontSizeElementRef.current = getFontSizeElement();
    }
    const observer = new ResizeObserver(() => {
      const fontSize = getFontSize(fontSizeElementRef.current);
      setSize(prevState => ({
        previousSize: prevState.currentSize || fontSize,
        currentSize: fontSize
      }));
    });
    observer.observe(fontSizeElementRef.current);
    return () => {
      observer.disconnect();
      if (hookUsagesCount === 0 && fontSizeElementRef.current) {
        document.body.removeChild(fontSizeElementRef.current);
      }
      hookUsagesCount--;
    };
  }, []);
  return size;
};
exports.useFontSizeObserver = useFontSizeObserver;