import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { createElement, Component, useRef, useState } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { _ as _setPrototypeOf, a as _objectWithoutPropertiesLoose, b as _extends } from "./setPrototypeOf-C-47lAIH.js";
import { P as PropTypes } from "./index-BQUDGKDP.js";
function _inheritsLoose(t, o) {
  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
}
var MapShim = (function() {
  if (typeof Map !== "undefined") {
    return Map;
  }
  function getIndex(arr, key) {
    var result = -1;
    arr.some(function(entry, index2) {
      if (entry[0] === key) {
        result = index2;
        return true;
      }
      return false;
    });
    return result;
  }
  return (
    /** @class */
    (function() {
      function class_1() {
        this.__entries__ = [];
      }
      Object.defineProperty(class_1.prototype, "size", {
        /**
         * @returns {boolean}
         */
        get: function() {
          return this.__entries__.length;
        },
        enumerable: true,
        configurable: true
      });
      class_1.prototype.get = function(key) {
        var index2 = getIndex(this.__entries__, key);
        var entry = this.__entries__[index2];
        return entry && entry[1];
      };
      class_1.prototype.set = function(key, value) {
        var index2 = getIndex(this.__entries__, key);
        if (~index2) {
          this.__entries__[index2][1] = value;
        } else {
          this.__entries__.push([key, value]);
        }
      };
      class_1.prototype.delete = function(key) {
        var entries = this.__entries__;
        var index2 = getIndex(entries, key);
        if (~index2) {
          entries.splice(index2, 1);
        }
      };
      class_1.prototype.has = function(key) {
        return !!~getIndex(this.__entries__, key);
      };
      class_1.prototype.clear = function() {
        this.__entries__.splice(0);
      };
      class_1.prototype.forEach = function(callback, ctx) {
        if (ctx === void 0) {
          ctx = null;
        }
        for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
          var entry = _a[_i];
          callback.call(ctx, entry[1], entry[0]);
        }
      };
      return class_1;
    })()
  );
})();
var isBrowser = typeof window !== "undefined" && typeof document !== "undefined" && window.document === document;
var global$1 = (function() {
  if (typeof global !== "undefined" && global.Math === Math) {
    return global;
  }
  if (typeof self !== "undefined" && self.Math === Math) {
    return self;
  }
  if (typeof window !== "undefined" && window.Math === Math) {
    return window;
  }
  return Function("return this")();
})();
var requestAnimationFrame$1 = (function() {
  if (typeof requestAnimationFrame === "function") {
    return requestAnimationFrame.bind(global$1);
  }
  return function(callback) {
    return setTimeout(function() {
      return callback(Date.now());
    }, 1e3 / 60);
  };
})();
var trailingTimeout = 2;
function throttle(callback, delay) {
  var leadingCall = false, trailingCall = false, lastCallTime = 0;
  function resolvePending() {
    if (leadingCall) {
      leadingCall = false;
      callback();
    }
    if (trailingCall) {
      proxy();
    }
  }
  function timeoutCallback() {
    requestAnimationFrame$1(resolvePending);
  }
  function proxy() {
    var timeStamp = Date.now();
    if (leadingCall) {
      if (timeStamp - lastCallTime < trailingTimeout) {
        return;
      }
      trailingCall = true;
    } else {
      leadingCall = true;
      trailingCall = false;
      setTimeout(timeoutCallback, delay);
    }
    lastCallTime = timeStamp;
  }
  return proxy;
}
var REFRESH_DELAY = 20;
var transitionKeys = ["top", "right", "bottom", "left", "width", "height", "size", "weight"];
var mutationObserverSupported = typeof MutationObserver !== "undefined";
var ResizeObserverController = (
  /** @class */
  (function() {
    function ResizeObserverController2() {
      this.connected_ = false;
      this.mutationEventsAdded_ = false;
      this.mutationsObserver_ = null;
      this.observers_ = [];
      this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
      this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
    }
    ResizeObserverController2.prototype.addObserver = function(observer) {
      if (!~this.observers_.indexOf(observer)) {
        this.observers_.push(observer);
      }
      if (!this.connected_) {
        this.connect_();
      }
    };
    ResizeObserverController2.prototype.removeObserver = function(observer) {
      var observers2 = this.observers_;
      var index2 = observers2.indexOf(observer);
      if (~index2) {
        observers2.splice(index2, 1);
      }
      if (!observers2.length && this.connected_) {
        this.disconnect_();
      }
    };
    ResizeObserverController2.prototype.refresh = function() {
      var changesDetected = this.updateObservers_();
      if (changesDetected) {
        this.refresh();
      }
    };
    ResizeObserverController2.prototype.updateObservers_ = function() {
      var activeObservers = this.observers_.filter(function(observer) {
        return observer.gatherActive(), observer.hasActive();
      });
      activeObservers.forEach(function(observer) {
        return observer.broadcastActive();
      });
      return activeObservers.length > 0;
    };
    ResizeObserverController2.prototype.connect_ = function() {
      if (!isBrowser || this.connected_) {
        return;
      }
      document.addEventListener("transitionend", this.onTransitionEnd_);
      window.addEventListener("resize", this.refresh);
      if (mutationObserverSupported) {
        this.mutationsObserver_ = new MutationObserver(this.refresh);
        this.mutationsObserver_.observe(document, {
          attributes: true,
          childList: true,
          characterData: true,
          subtree: true
        });
      } else {
        document.addEventListener("DOMSubtreeModified", this.refresh);
        this.mutationEventsAdded_ = true;
      }
      this.connected_ = true;
    };
    ResizeObserverController2.prototype.disconnect_ = function() {
      if (!isBrowser || !this.connected_) {
        return;
      }
      document.removeEventListener("transitionend", this.onTransitionEnd_);
      window.removeEventListener("resize", this.refresh);
      if (this.mutationsObserver_) {
        this.mutationsObserver_.disconnect();
      }
      if (this.mutationEventsAdded_) {
        document.removeEventListener("DOMSubtreeModified", this.refresh);
      }
      this.mutationsObserver_ = null;
      this.mutationEventsAdded_ = false;
      this.connected_ = false;
    };
    ResizeObserverController2.prototype.onTransitionEnd_ = function(_a) {
      var _b = _a.propertyName, propertyName = _b === void 0 ? "" : _b;
      var isReflowProperty = transitionKeys.some(function(key) {
        return !!~propertyName.indexOf(key);
      });
      if (isReflowProperty) {
        this.refresh();
      }
    };
    ResizeObserverController2.getInstance = function() {
      if (!this.instance_) {
        this.instance_ = new ResizeObserverController2();
      }
      return this.instance_;
    };
    ResizeObserverController2.instance_ = null;
    return ResizeObserverController2;
  })()
);
var defineConfigurable = (function(target, props) {
  for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
    var key = _a[_i];
    Object.defineProperty(target, key, {
      value: props[key],
      enumerable: false,
      writable: false,
      configurable: true
    });
  }
  return target;
});
var getWindowOf$1 = (function(target) {
  var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
  return ownerGlobal || global$1;
});
var emptyRect = createRectInit(0, 0, 0, 0);
function toFloat(value) {
  return parseFloat(value) || 0;
}
function getBordersSize(styles) {
  var positions = [];
  for (var _i = 1; _i < arguments.length; _i++) {
    positions[_i - 1] = arguments[_i];
  }
  return positions.reduce(function(size, position) {
    var value = styles["border-" + position + "-width"];
    return size + toFloat(value);
  }, 0);
}
function getPaddings(styles) {
  var positions = ["top", "right", "bottom", "left"];
  var paddings = {};
  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
    var position = positions_1[_i];
    var value = styles["padding-" + position];
    paddings[position] = toFloat(value);
  }
  return paddings;
}
function getSVGContentRect(target) {
  var bbox = target.getBBox();
  return createRectInit(0, 0, bbox.width, bbox.height);
}
function getHTMLElementContentRect(target) {
  var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
  if (!clientWidth && !clientHeight) {
    return emptyRect;
  }
  var styles = getWindowOf$1(target).getComputedStyle(target);
  var paddings = getPaddings(styles);
  var horizPad = paddings.left + paddings.right;
  var vertPad = paddings.top + paddings.bottom;
  var width = toFloat(styles.width), height = toFloat(styles.height);
  if (styles.boxSizing === "border-box") {
    if (Math.round(width + horizPad) !== clientWidth) {
      width -= getBordersSize(styles, "left", "right") + horizPad;
    }
    if (Math.round(height + vertPad) !== clientHeight) {
      height -= getBordersSize(styles, "top", "bottom") + vertPad;
    }
  }
  if (!isDocumentElement(target)) {
    var vertScrollbar = Math.round(width + horizPad) - clientWidth;
    var horizScrollbar = Math.round(height + vertPad) - clientHeight;
    if (Math.abs(vertScrollbar) !== 1) {
      width -= vertScrollbar;
    }
    if (Math.abs(horizScrollbar) !== 1) {
      height -= horizScrollbar;
    }
  }
  return createRectInit(paddings.left, paddings.top, width, height);
}
var isSVGGraphicsElement = (function() {
  if (typeof SVGGraphicsElement !== "undefined") {
    return function(target) {
      return target instanceof getWindowOf$1(target).SVGGraphicsElement;
    };
  }
  return function(target) {
    return target instanceof getWindowOf$1(target).SVGElement && typeof target.getBBox === "function";
  };
})();
function isDocumentElement(target) {
  return target === getWindowOf$1(target).document.documentElement;
}
function getContentRect$1(target) {
  if (!isBrowser) {
    return emptyRect;
  }
  if (isSVGGraphicsElement(target)) {
    return getSVGContentRect(target);
  }
  return getHTMLElementContentRect(target);
}
function createReadOnlyRect(_a) {
  var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
  var Constr = typeof DOMRectReadOnly !== "undefined" ? DOMRectReadOnly : Object;
  var rect = Object.create(Constr.prototype);
  defineConfigurable(rect, {
    x,
    y,
    width,
    height,
    top: y,
    right: x + width,
    bottom: height + y,
    left: x
  });
  return rect;
}
function createRectInit(x, y, width, height) {
  return { x, y, width, height };
}
var ResizeObservation = (
  /** @class */
  (function() {
    function ResizeObservation2(target) {
      this.broadcastWidth = 0;
      this.broadcastHeight = 0;
      this.contentRect_ = createRectInit(0, 0, 0, 0);
      this.target = target;
    }
    ResizeObservation2.prototype.isActive = function() {
      var rect = getContentRect$1(this.target);
      this.contentRect_ = rect;
      return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
    };
    ResizeObservation2.prototype.broadcastRect = function() {
      var rect = this.contentRect_;
      this.broadcastWidth = rect.width;
      this.broadcastHeight = rect.height;
      return rect;
    };
    return ResizeObservation2;
  })()
);
var ResizeObserverEntry = (
  /** @class */
  /* @__PURE__ */ (function() {
    function ResizeObserverEntry2(target, rectInit) {
      var contentRect = createReadOnlyRect(rectInit);
      defineConfigurable(this, { target, contentRect });
    }
    return ResizeObserverEntry2;
  })()
);
var ResizeObserverSPI = (
  /** @class */
  (function() {
    function ResizeObserverSPI2(callback, controller, callbackCtx) {
      this.activeObservations_ = [];
      this.observations_ = new MapShim();
      if (typeof callback !== "function") {
        throw new TypeError("The callback provided as parameter 1 is not a function.");
      }
      this.callback_ = callback;
      this.controller_ = controller;
      this.callbackCtx_ = callbackCtx;
    }
    ResizeObserverSPI2.prototype.observe = function(target) {
      if (!arguments.length) {
        throw new TypeError("1 argument required, but only 0 present.");
      }
      if (typeof Element === "undefined" || !(Element instanceof Object)) {
        return;
      }
      if (!(target instanceof getWindowOf$1(target).Element)) {
        throw new TypeError('parameter 1 is not of type "Element".');
      }
      var observations = this.observations_;
      if (observations.has(target)) {
        return;
      }
      observations.set(target, new ResizeObservation(target));
      this.controller_.addObserver(this);
      this.controller_.refresh();
    };
    ResizeObserverSPI2.prototype.unobserve = function(target) {
      if (!arguments.length) {
        throw new TypeError("1 argument required, but only 0 present.");
      }
      if (typeof Element === "undefined" || !(Element instanceof Object)) {
        return;
      }
      if (!(target instanceof getWindowOf$1(target).Element)) {
        throw new TypeError('parameter 1 is not of type "Element".');
      }
      var observations = this.observations_;
      if (!observations.has(target)) {
        return;
      }
      observations.delete(target);
      if (!observations.size) {
        this.controller_.removeObserver(this);
      }
    };
    ResizeObserverSPI2.prototype.disconnect = function() {
      this.clearActive();
      this.observations_.clear();
      this.controller_.removeObserver(this);
    };
    ResizeObserverSPI2.prototype.gatherActive = function() {
      var _this = this;
      this.clearActive();
      this.observations_.forEach(function(observation) {
        if (observation.isActive()) {
          _this.activeObservations_.push(observation);
        }
      });
    };
    ResizeObserverSPI2.prototype.broadcastActive = function() {
      if (!this.hasActive()) {
        return;
      }
      var ctx = this.callbackCtx_;
      var entries = this.activeObservations_.map(function(observation) {
        return new ResizeObserverEntry(observation.target, observation.broadcastRect());
      });
      this.callback_.call(ctx, entries, ctx);
      this.clearActive();
    };
    ResizeObserverSPI2.prototype.clearActive = function() {
      this.activeObservations_.splice(0);
    };
    ResizeObserverSPI2.prototype.hasActive = function() {
      return this.activeObservations_.length > 0;
    };
    return ResizeObserverSPI2;
  })()
);
var observers = typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : new MapShim();
var ResizeObserver = (
  /** @class */
  /* @__PURE__ */ (function() {
    function ResizeObserver2(callback) {
      if (!(this instanceof ResizeObserver2)) {
        throw new TypeError("Cannot call a class as a function.");
      }
      if (!arguments.length) {
        throw new TypeError("1 argument required, but only 0 present.");
      }
      var controller = ResizeObserverController.getInstance();
      var observer = new ResizeObserverSPI(callback, controller, this);
      observers.set(this, observer);
    }
    return ResizeObserver2;
  })()
);
[
  "observe",
  "unobserve",
  "disconnect"
].forEach(function(method) {
  ResizeObserver.prototype[method] = function() {
    var _a;
    return (_a = observers.get(this))[method].apply(_a, arguments);
  };
});
var index = (function() {
  if (typeof global$1.ResizeObserver !== "undefined") {
    return global$1.ResizeObserver;
  }
  return ResizeObserver;
})();
var types = ["client", "offset", "scroll", "bounds", "margin"];
function getTypes(props) {
  var allowedTypes = [];
  types.forEach(function(type) {
    if (props[type]) {
      allowedTypes.push(type);
    }
  });
  return allowedTypes;
}
function getContentRect(node, types2) {
  var calculations = {};
  if (types2.indexOf("client") > -1) {
    calculations.client = {
      top: node.clientTop,
      left: node.clientLeft,
      width: node.clientWidth,
      height: node.clientHeight
    };
  }
  if (types2.indexOf("offset") > -1) {
    calculations.offset = {
      top: node.offsetTop,
      left: node.offsetLeft,
      width: node.offsetWidth,
      height: node.offsetHeight
    };
  }
  if (types2.indexOf("scroll") > -1) {
    calculations.scroll = {
      top: node.scrollTop,
      left: node.scrollLeft,
      width: node.scrollWidth,
      height: node.scrollHeight
    };
  }
  if (types2.indexOf("bounds") > -1) {
    var rect = node.getBoundingClientRect();
    calculations.bounds = {
      top: rect.top,
      right: rect.right,
      bottom: rect.bottom,
      left: rect.left,
      width: rect.width,
      height: rect.height
    };
  }
  if (types2.indexOf("margin") > -1) {
    var styles = getComputedStyle(node);
    calculations.margin = {
      top: styles ? parseInt(styles.marginTop) : 0,
      right: styles ? parseInt(styles.marginRight) : 0,
      bottom: styles ? parseInt(styles.marginBottom) : 0,
      left: styles ? parseInt(styles.marginLeft) : 0
    };
  }
  return calculations;
}
function getWindowOf(target) {
  var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
  return ownerGlobal || window;
}
function withContentRect(types2) {
  return function(WrappedComponent) {
    var _class, _temp;
    return _temp = _class = /* @__PURE__ */ (function(_Component) {
      _inheritsLoose(WithContentRect, _Component);
      function WithContentRect() {
        var _this;
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }
        _this = _Component.call.apply(_Component, [this].concat(args)) || this;
        _this.state = {
          contentRect: {
            entry: {},
            client: {},
            offset: {},
            scroll: {},
            bounds: {},
            margin: {}
          }
        };
        _this._animationFrameID = null;
        _this._resizeObserver = null;
        _this._node = null;
        _this._window = null;
        _this.measure = function(entries) {
          var contentRect = getContentRect(_this._node, getTypes(_this.props));
          if (entries) {
            contentRect.entry = entries[0].contentRect;
          }
          _this._animationFrameID = _this._window.requestAnimationFrame(function() {
            if (_this._resizeObserver !== null) {
              _this.setState({
                contentRect
              });
              if (typeof _this.props.onResize === "function") {
                _this.props.onResize(contentRect);
              }
            }
          });
        };
        _this._handleRef = function(node) {
          if (_this._resizeObserver !== null && _this._node !== null) {
            _this._resizeObserver.unobserve(_this._node);
          }
          _this._node = node;
          _this._window = getWindowOf(_this._node);
          var innerRef = _this.props.innerRef;
          if (innerRef) {
            if (typeof innerRef === "function") {
              innerRef(_this._node);
            } else {
              innerRef.current = _this._node;
            }
          }
          if (_this._resizeObserver !== null && _this._node !== null) {
            _this._resizeObserver.observe(_this._node);
          }
        };
        return _this;
      }
      var _proto = WithContentRect.prototype;
      _proto.componentDidMount = function componentDidMount() {
        this._resizeObserver = this._window !== null && this._window.ResizeObserver ? new this._window.ResizeObserver(this.measure) : new index(this.measure);
        if (this._node !== null) {
          this._resizeObserver.observe(this._node);
          if (typeof this.props.onResize === "function") {
            this.props.onResize(getContentRect(this._node, getTypes(this.props)));
          }
        }
      };
      _proto.componentWillUnmount = function componentWillUnmount() {
        if (this._window !== null) {
          this._window.cancelAnimationFrame(this._animationFrameID);
        }
        if (this._resizeObserver !== null) {
          this._resizeObserver.disconnect();
          this._resizeObserver = null;
        }
      };
      _proto.render = function render() {
        var _this$props = this.props;
        _this$props.innerRef;
        _this$props.onResize;
        var props = _objectWithoutPropertiesLoose(_this$props, ["innerRef", "onResize"]);
        return createElement(WrappedComponent, _extends({}, props, {
          measureRef: this._handleRef,
          measure: this.measure,
          contentRect: this.state.contentRect
        }));
      };
      return WithContentRect;
    })(Component), _class.propTypes = {
      client: PropTypes.bool,
      offset: PropTypes.bool,
      scroll: PropTypes.bool,
      bounds: PropTypes.bool,
      margin: PropTypes.bool,
      innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
      onResize: PropTypes.func
    }, _temp;
  };
}
var Measure = withContentRect()(function(_ref) {
  var measure = _ref.measure, measureRef = _ref.measureRef, contentRect = _ref.contentRect, children = _ref.children;
  return children({
    measure,
    measureRef,
    contentRect
  });
});
Measure.displayName = "Measure";
Measure.propTypes.children = PropTypes.func;
const figure = React__default.memo(function Figure(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden || !children) {
    return null;
  }
  let childrenToRender = children;
  let caption = null;
  let captionChild = null;
  if (SVs.captionChildName) {
    let captionChildInd = null;
    for (let [ind, child] of children.entries()) {
      if (child && typeof child === "object" && "props" in child && child.props?.componentInstructions.componentIdx === SVs.captionChildName) {
        captionChildInd = ind;
        break;
      }
    }
    if (captionChildInd !== null) {
      captionChild = children[captionChildInd];
      childrenToRender.splice(captionChildInd, 1);
    }
  }
  if (!SVs.suppressFigureNameInCaption) {
    let figureName = /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: SVs.figureName });
    if (captionChild) {
      caption = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
        figureName,
        ": ",
        captionChild
      ] });
    } else {
      caption = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: figureName });
    }
  } else {
    if (captionChild) {
      caption = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: captionChild });
    }
  }
  const [captionTextAlign, setCaptionTextAlign] = useState(
    "center"
  );
  function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute(
      "style",
      "margin:0; padding:0; font-family:" + (el.style.fontFamily || "inherit") + "; font-size:" + (el.style.fontSize || "inherit")
    );
    temp.innerHTML = "A";
    el.parentNode?.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode?.removeChild(temp);
    return ret;
  }
  function countCaptionLines() {
    const el = document.getElementById(id + "_caption");
    if (!el) {
      console.warn(`Element with id ${id + "_caption"} not found.`);
      return 0;
    }
    const divHeight = el.offsetHeight;
    const lineHeight = getLineHeight(el);
    var lines = Math.round(divHeight / lineHeight);
    return lines;
  }
  function handleResize() {
    if (countCaptionLines() >= 2) {
      setCaptionTextAlign("left");
    } else {
      setCaptionTextAlign("center");
    }
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "figure",
    {
      id,
      style: { margin: "12px 0" },
      ref,
      "aria-labelledby": id + "_caption",
      children: [
        childrenToRender,
        /* @__PURE__ */ jsxRuntimeExports.jsx("figcaption", { id: id + "_caption", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Measure, { onResize: handleResize, children: ({ measureRef }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            ref: measureRef,
            style: { textAlign: captionTextAlign },
            children: caption
          }
        ) }) })
      ]
    }
  );
});
export {
  figure as default
};
