"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var mobile_toolbar_overlay_exports = {};
__export(mobile_toolbar_overlay_exports, {
  MobileToolbarOverlay: () => MobileToolbarOverlay
});
module.exports = __toCommonJS(mobile_toolbar_overlay_exports);
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../../../../ricos-context/index.js");
var import_get_toolbar_gradient_percents = require("./get-toolbar-gradient-percents.js");
var import_mobile_toolbar_overlay_scss = __toESM(require("./mobile-toolbar-overlay-scss.js"));
const MobileToolbarOverlay = ({
  children,
  mobileToolbar,
  maxWidth
}) => {
  const { languageDir } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const lastCalculatedMobileToolbarWidth = (0, import_react.useRef)(0);
  const [gradientWidths, setGradientWidths] = (0, import_react.useState)(
    () => (0, import_get_toolbar_gradient_percents.getToolbarGradientPercents)(mobileToolbar, languageDir === "rtl")
  );
  const toolbarParams = (0, import_react.useMemo)(() => {
    if (!mobileToolbar) {
      return {
        height: 0,
        topOffset: 0,
        width: 0
      };
    }
    return {
      height: mobileToolbar.clientHeight,
      topOffset: parseInt(getComputedStyle(mobileToolbar).getPropertyValue("border-top-width")),
      width: mobileToolbar.offsetWidth
    };
  }, [mobileToolbar, maxWidth]);
  (0, import_react.useEffect)(() => {
    if (!mobileToolbar || !window?.ResizeObserver) {
      return;
    }
    const recalculateGradients = () => {
      lastCalculatedMobileToolbarWidth.current = mobileToolbar.clientWidth;
      setGradientWidths((0, import_get_toolbar_gradient_percents.getToolbarGradientPercents)(mobileToolbar, languageDir === "rtl"));
    };
    mobileToolbar.addEventListener("scroll", recalculateGradients);
    recalculateGradients();
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.contentRect.width !== lastCalculatedMobileToolbarWidth.current) {
          recalculateGradients();
        }
      });
    });
    resizeObserver.observe(mobileToolbar);
    return () => {
      mobileToolbar.removeEventListener("scroll", recalculateGradients);
      resizeObserver.disconnect();
    };
  }, [mobileToolbar, toolbarParams]);
  if (gradientWidths === void 0) {
    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
  }
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: import_mobile_toolbar_overlay_scss.default.mobileToolbarOverlay,
      style: {
        "--mobile-toolbar-width": toolbarParams.width,
        "--left-gradient-end": gradientWidths.leftGradientEndPercent,
        "--right-gradient-start": gradientWidths.rightGradientStartPercent
      }
    },
    children
  );
};
//# sourceMappingURL=mobile-toolbar-overlay.js.map
