import { j as jsxRuntimeExports, A as ActionButtonGroup, o as ActionButton } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
/* empty css                   */
import { a as createCheckWorkComponent, c as calculateValidationState } from "./checkWork-D9syAFsW.js";
import { D as DescriptionPopover } from "./Description-kxNMQ7JQ.js";
const matrixInput = React__default.memo(function MatrixInput(props) {
  let { id, SVs, actions, children, callAction } = useDoenetRenderer(props);
  let validationState = useRef("unvalidated");
  const updateValidationState = () => {
    validationState.current = calculateValidationState(SVs);
  };
  if (SVs.hidden) {
    return null;
  }
  updateValidationState();
  const disabled = SVs.disabled;
  getComputedStyle(
    document.documentElement
  ).getPropertyValue("--mainGray");
  const submitAnswer = () => callAction({
    action: actions.submitAnswer
  });
  const checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState.current,
    submitAnswer,
    false
  );
  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;
  if (SVs.labelHasLatex) {
    label = /* @__PURE__ */ jsxRuntimeExports.jsx(MathJax, { hideUntilTypeset: "first", inline: true, dynamic: true, children: label });
  }
  if (label) {
    label = /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        style: {
          marginRight: "5px",
          alignContent: "center"
        },
        children: label
      }
    );
  }
  const shortDescription = SVs.shortDescription || void 0;
  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 }) });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      style: {
        display: "inline-flex",
        margin: "0px 4px 4px 4px",
        alignItems: "start"
      },
      id: `${id}-container`,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { style: { display: "inline-flex", maxWidth: "100%" }, children: [
          label,
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "matrix-input", id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "table",
            {
              "aria-label": shortDescription,
              "aria-details": descriptionId,
              children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: matrixInputs })
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginRight: "4px" } }),
        rowNumControls,
        colNumControls,
        checkWorkComponent,
        description
      ]
    }
  ) });
});
export {
  matrixInput as default
};
