import { u as useRecordVisibilityChanges, d as DocContext, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef, useContext } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { A as AnswerResponseButton } from "./AnswerResponseButton-DuVuBJnQ.js";
import { c as calculateValidationState, a as createCheckWorkComponent } from "./checkWork-D9syAFsW.js";
const pretzel = React__default.memo(function Pretzel(props) {
  let {
    componentIdx,
    id,
    SVs,
    docId,
    activityId,
    children,
    actions,
    callAction,
    flags
  } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  const { showAnswerResponseButton, answerResponseCounts } = useContext(DocContext) || {};
  if (SVs.hidden) {
    return null;
  }
  const submitAnswer = () => callAction({
    action: actions.submitAnswer
  });
  let answerResponseButton = null;
  if (showAnswerResponseButton) {
    answerResponseButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
      AnswerResponseButton,
      {
        answerId: id,
        answerComponentIdx: componentIdx,
        docId,
        activityId,
        numResponses: answerResponseCounts?.[id],
        flags
      }
    );
  }
  const numProblems = SVs.numProblems;
  const numGroups = Math.ceil(numProblems / 12);
  const problemGrids = [];
  for (let grp = 0; grp < numGroups; grp++) {
    const problems = [];
    for (let prob = grp * 12; prob < Math.min((grp + 1) * 12, numProblems); prob++) {
      const answer = children[3 * prob];
      const input = children[3 * prob + 1];
      const statement = children[3 * prob + 2];
      const gridIdx = prob % 12;
      const problem = /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "div",
        {
          className: `pretzel${gridIdx + 1} pretzelProblem`,
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pretzelAnswerInput", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx("b", { children: "Answer" }),
                ": ",
                answer
              ] }),
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pretzelInput", children: input }) })
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pretzelStatement", children: statement })
          ]
        },
        prob
      );
      problems.push(problem);
    }
    let gridClasses = `pretzelWrapper pretzelWrapper${SVs.maxNumColumns}`;
    if (grp === 0) {
      gridClasses += " pretzelWrapperTop";
    }
    if (grp === numGroups - 1) {
      gridClasses += " pretzelWrapperBottom";
    }
    const grid = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: gridClasses, children: problems }, grp);
    problemGrids.push(grid);
  }
  const validationState = calculateValidationState(SVs);
  const checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState,
    submitAnswer,
    true
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { id, style: { marginBottom: "4px" }, children: [
    problemGrids,
    checkWorkComponent,
    answerResponseButton
  ] });
});
export {
  pretzel as default
};
