import { u as useRecordVisibilityChanges, d as DocContext, j as jsxRuntimeExports } from "./doenetml-BPsLSRHD.js";
import React__default, { useRef, useContext } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-BDC0Rur_.js";
import { A as AnswerResponseButton } from "./AnswerResponseButton-Cr6OG_2W.js";
import { c as calculateValidationState, u as useSubmitActionWithDelay, a as createCheckWorkComponent } from "./useSubmitActionWithDelay-bJj16Fl0.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 validationState = calculateValidationState(SVs);
  const { isPending, submitActionWithPending } = useSubmitActionWithDelay({
    actionKey: "submitAnswer",
    actions,
    callAction,
    validationState,
    justSubmitted: SVs.justSubmitted
  });
  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`,
          "data-test": "pretzel-problem-row",
          "data-row-index": prob,
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "div",
              {
                className: "pretzelAnswer",
                "data-test": "pretzel-row-answer",
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("b", { children: "Answer" }),
                  ": ",
                  answer
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "div",
              {
                className: "pretzelInputStatement",
                "data-test": "pretzel-row-input-statement",
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "pretzel-row-input", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: input }) }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "pretzel-row-statement", 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 checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState,
    submitActionWithPending,
    true,
    isPending
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { id, style: { marginBottom: "4px" }, "data-test": "pretzel-root", children: [
    problemGrids,
    checkWorkComponent,
    answerResponseButton
  ] });
});
export {
  pretzel as default
};
