import { d as DocContext, j as jsxRuntimeExports, M as MathJax } from "./doenetml-cB_aZGJ5.js";
import React__default, { 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";
import { D as DescriptionPopover } from "./Description-kxNMQ7JQ.js";
const answer = React__default.memo(function Answer(props) {
  let {
    componentIdx,
    id,
    SVs,
    docId,
    activityId,
    actions,
    children,
    flags,
    callAction
  } = useDoenetRenderer(props);
  const { showAnswerResponseButton, answerResponseCounts } = useContext(DocContext) || {};
  if (SVs.hidden) {
    return null;
  }
  const submitAnswer = () => callAction({
    action: actions.submitAnswer
  });
  let label = SVs.label;
  if (SVs.labelHasLatex) {
    label = /* @__PURE__ */ jsxRuntimeExports.jsx(MathJax, { hideUntilTypeset: "first", inline: true, dynamic: true, children: label });
  }
  const inputChildrenToRender = SVs.inputChildIndices.map(
    (ind) => children[ind]
  );
  const descriptionChild = SVs.descriptionChildInd !== -1 && children[SVs.descriptionChildInd];
  let descriptionId = void 0;
  let description = null;
  if (descriptionChild) {
    descriptionId = `${id}-description-content`;
    description = /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionPopover, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: descriptionId, children: descriptionChild }) });
  }
  let answerResponseButton = null;
  if (showAnswerResponseButton) {
    answerResponseButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
      AnswerResponseButton,
      {
        answerId: id,
        answerComponentIdx: componentIdx,
        docId,
        activityId,
        numResponses: answerResponseCounts?.[id],
        flags
      }
    );
  }
  const validationState = calculateValidationState(SVs);
  let checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState,
    submitAnswer,
    true
  );
  if (checkWorkComponent) {
    if (description) {
      checkWorkComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
        "span",
        {
          "aria-details": descriptionId,
          "data-test": "Details Associated",
          children: checkWorkComponent
        }
      );
    }
    if (label) {
      checkWorkComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "label",
        {
          style: {
            display: "inline-flex",
            maxWidth: "100%"
          },
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { marginRight: "4px" }, children: label }),
            checkWorkComponent
          ]
        }
      );
    }
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "span",
    {
      id,
      style: {
        marginBottom: "4px",
        display: SVs.inline || !SVs.haveBlockInputChild ? "inline-flex" : "flex",
        alignItems: "start"
      },
      children: [
        inputChildrenToRender,
        checkWorkComponent,
        answerResponseButton,
        description
      ]
    }
  );
});
export {
  answer as default
};
