import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
const table = React__default.memo(function Table(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden) {
    return null;
  }
  let heading = null;
  let childrenToRender = [...children];
  let title = null;
  if (SVs.titleChildName) {
    let titleChildInd = null;
    for (let [ind, child] of children.entries()) {
      if (child && typeof child === "object" && "props" in child && child.props?.componentInstructions.componentIdx === SVs.titleChildName) {
        titleChildInd = ind;
        break;
      }
    }
    if (titleChildInd !== null) {
      title = children[titleChildInd];
      childrenToRender.splice(titleChildInd, 1);
    }
  }
  if (!title) {
    title = SVs.title;
  }
  if (!SVs.suppressTableNameInTitle) {
    let tableName = /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: SVs.tableName });
    if (title) {
      title = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        tableName,
        ": ",
        title
      ] });
    } else {
      title = tableName;
    }
  }
  heading = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: id + "_title", children: title });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id, style: { margin: "12px 0" }, ref, children: [
    heading,
    childrenToRender
  ] });
});
export {
  table as default
};
