import { j as jsxRuntimeExports, A as ActionButtonGroup, o as ActionButton, M as MathJax } from "./doenetml-BPsLSRHD.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-BDC0Rur_.js";
/* empty css                   */
import { c as calculateValidationState, u as useSubmitActionWithDelay, a as createCheckWorkComponent } from "./useSubmitActionWithDelay-bJj16Fl0.js";
import { D as DescriptionPopover } from "./Description-D-NiLUUD.js";
const matrixInput = React__default.memo(function MatrixInput(props) {
  let { id, SVs, actions, children, callAction } = useDoenetRenderer(props);
  let validationState = useRef("unvalidated");
  if (SVs.hidden) {
    return null;
  }
  validationState.current = calculateValidationState(SVs);
  const disabled = SVs.disabled;
  getComputedStyle(
    document.documentElement
  ).getPropertyValue("--mainGray");
  const { isPending, submitActionWithPending } = useSubmitActionWithDelay({
    actionKey: "submitAnswer",
    actions,
    callAction,
    validationState: validationState.current,
    justSubmitted: SVs.justSubmitted
  });
  const checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState.current,
    submitActionWithPending,
    SVs.forceFullCheckWorkButton,
    isPending
  );
  let matrixInputs = [];
  for (let rowInd = 0; rowInd < SVs.numRows; rowInd++) {
    let mathinputRow = [];
    for (let colInd = 0; colInd < SVs.numColumns; colInd++) {
      mathinputRow.push(
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "td",
          {
            className: "matrixCell",
            id: id + "_component_" + rowInd + "_" + colInd,
            children: children[rowInd * SVs.numColumns + colInd]
          },
          colInd
        )
      );
    }
    matrixInputs.push(/* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: mathinputRow }, rowInd));
  }
  let rowNumControls = null;
  if (SVs.showSizeControls) {
    rowNumControls = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { margin: "0px 4px 4px 0px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionButtonGroup, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        ActionButton,
        {
          id: id + "_rowDecrement",
          value: "r-",
          onClick: () => callAction({
            action: actions.updateNumRows,
            args: { numRows: SVs.numRows - 1 }
          }),
          disabled: SVs.numRows < 2 || disabled,
          ariaLabel: "Remove row"
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        ActionButton,
        {
          id: id + "_rowIncrement",
          value: "r+",
          onClick: () => callAction({
            action: actions.updateNumRows,
            args: { numRows: SVs.numRows + 1 }
          }),
          disabled,
          ariaLabel: "Add row"
        }
      )
    ] }) });
  }
  let colNumControls = null;
  if (SVs.showSizeControls) {
    colNumControls = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { margin: "0px 4px 4px 0px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionButtonGroup, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        ActionButton,
        {
          id: id + "_columnDecrement",
          value: "c-",
          onClick: () => callAction({
            action: actions.updateNumColumns,
            args: { numColumns: SVs.numColumns - 1 }
          }),
          disabled: SVs.numColumns < 2 || disabled,
          ariaLabel: "Remove column"
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        ActionButton,
        {
          id: id + "_columnIncrement",
          value: "c+",
          onClick: () => callAction({
            action: actions.updateNumColumns,
            args: { numColumns: SVs.numColumns + 1 }
          }),
          disabled,
          ariaLabel: "Add column"
        }
      )
    ] }) });
  }
  let label = SVs.label;
  const hasLabel = typeof SVs.label === "string" ? SVs.label.trim() !== "" : !!SVs.label;
  const labelId = `${id}-label`;
  if (SVs.labelHasLatex) {
    label = /* @__PURE__ */ jsxRuntimeExports.jsx(MathJax, { hideUntilTypeset: "first", inline: true, dynamic: true, children: label });
  }
  const shortDescription = SVs.shortDescription || void 0;
  const externalLabelRendererIds = SVs.externalLabelRendererIds ?? [];
  const groupLabelledByIds = [
    hasLabel ? labelId : null,
    ...externalLabelRendererIds
  ].filter(Boolean).join(" ");
  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 }) });
  }
  const labelComponent = hasLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(
    "span",
    {
      id: labelId,
      style: {
        marginRight: SVs.labelPosition === "right" ? void 0 : "5px",
        marginLeft: SVs.labelPosition === "right" ? "5px" : void 0
      },
      children: label
    }
  ) : null;
  const matrixInputRow = /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { display: "inline-flex", alignItems: "flex-start" }, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "matrix-input", id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
      "table",
      {
        "aria-labelledby": groupLabelledByIds || void 0,
        "aria-label": !groupLabelledByIds ? shortDescription : void 0,
        "aria-description": groupLabelledByIds ? shortDescription : void 0,
        "aria-details": descriptionId,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: matrixInputs })
      }
    ) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginRight: "4px" } }),
    rowNumControls,
    colNumControls,
    checkWorkComponent,
    description
  ] });
  return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      style: {
        display: "inline-flex",
        maxWidth: "100%",
        margin: "0px 4px 4px 4px",
        alignItems: "baseline"
      },
      id: `${id}-container`,
      children: SVs.labelPosition === "right" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        matrixInputRow,
        labelComponent
      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        labelComponent,
        matrixInputRow
      ] })
    }
  ) });
});
export {
  matrixInput as default
};
