import { j as jsxRuntimeExports } from "./doenetml-BPsLSRHD.js";
import { s as sizeToCSS } from "./css-BJLDLYRJ.js";
import { D as DescriptionPopover, a as DescriptionAsDetails } from "./Description-D-NiLUUD.js";
function GraphFrame({
  id,
  SVs,
  isPrefigureRenderer,
  containerRef,
  descriptionChild,
  hasInteractiveControls,
  children
}) {
  const contentStyle = {
    width: sizeToCSS(SVs.width),
    aspectRatio: String(SVs.aspectRatio),
    maxWidth: "100%"
  };
  let outerStyle = {};
  let innerStyle = {};
  if (SVs.hidden) {
    contentStyle.display = "none";
  } else if (SVs.displayMode === "inline") {
    outerStyle = { display: "inline-block", verticalAlign: "middle" };
    innerStyle = {
      display: "inline-flex",
      alignItems: "start",
      width: "100%"
    };
  } else {
    outerStyle = { display: "flex", justifyContent: SVs.horizontalAlign };
    innerStyle = { maxWidth: "100%" };
  }
  if (SVs.showBorder) {
    contentStyle.border = "2px solid var(--canvasText)";
  } else {
    contentStyle.border = "none";
  }
  contentStyle.marginBottom = "12px";
  contentStyle.marginTop = "12px";
  contentStyle.backgroundColor = "var(--canvas)";
  contentStyle.color = "var(--canvasText)";
  let ariaLabel = SVs.shortDescription;
  let role = isPrefigureRenderer || hasInteractiveControls ? "group" : "img";
  let ariaHidden = false;
  if (SVs.decorative) {
    ariaLabel = void 0;
    role = void 0;
    ariaHidden = true;
  }
  let descriptionId = void 0;
  let description = null;
  if (descriptionChild) {
    descriptionId = `${id}-description-content`;
    description = SVs.displayMode === "inline" ? /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionPopover, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: descriptionId, children: descriptionChild }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionAsDetails, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: descriptionId, children: descriptionChild }) });
  }
  const content = typeof children === "function" ? children(contentStyle) : children;
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: outerStyle, ref: containerRef, id: `${id}-container`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: innerStyle, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        id: `${id}-description`,
        "aria-label": ariaLabel,
        role,
        "aria-hidden": ariaHidden,
        style: { maxWidth: "100%" },
        "aria-details": descriptionId,
        children: content
      }
    ),
    description
  ] }) });
}
export {
  GraphFrame as default
};
