import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { F as FontAwesomeIcon } from "./index.es-DKppzeUo.js";
import { h as faPuzzlePiece } from "./index-D_-RBdRX.js";
import { a as addCommasForCompositeRanges } from "./composites-DgtFnuE1.js";
const solution = React__default.memo(function Solution(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  let openCloseText = "open";
  if (SVs.hidden) {
    return null;
  }
  let icon;
  let childrenToRender = null;
  let infoBlockStyle = { display: "none" };
  let onClickFunction;
  let onKeyPressFunction;
  if (SVs.open) {
    if (SVs._compositeReplacementActiveRange) {
      children = addCommasForCompositeRanges({
        children,
        compositeReplacementActiveRange: SVs._compositeReplacementActiveRange,
        startInd: 0,
        endInd: children.length - 1
      });
    }
    icon = /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPuzzlePiece });
    openCloseText = "close";
    childrenToRender = SVs.rendered ? children : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Initializing..." });
    infoBlockStyle = {
      display: "block",
      margin: "0px 4px 12px 4px",
      padding: "6px",
      border: "2px solid var(--canvasText)",
      borderTop: "0px",
      borderBottomLeftRadius: "5px",
      borderBottomRightRadius: "5px",
      backgroundColor: "var(--canvas)"
    };
    onKeyPressFunction = (e) => {
      if (e.key === "Enter") {
        callAction({
          action: actions.closeSolution
        });
      }
    };
    if (SVs.canBeClosed) {
      onClickFunction = () => {
        callAction({
          action: actions.closeSolution
        });
      };
    } else {
      onClickFunction = () => {
      };
    }
  } else {
    icon = /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPuzzlePiece, rotation: 90 });
    onClickFunction = () => {
      callAction({
        action: actions.revealSolution
      });
    };
    onKeyPressFunction = (e) => {
      if (e.key === "Enter") {
        callAction({
          action: actions.revealSolution
        });
      }
    };
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "aside",
    {
      id,
      style: { margin: "12px 0" },
      ref,
      className: "solution",
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(
          "span",
          {
            style: {
              display: "block",
              margin: SVs.open ? "12px 4px 0px 4px" : "12px 4px 12px 4px",
              padding: "6px",
              border: "2px solid var(--canvasText)",
              borderTopLeftRadius: "5px",
              borderTopRightRadius: "5px",
              borderBottomLeftRadius: SVs.open ? "0px" : "5px",
              borderBottomRightRadius: SVs.open ? "0px" : "5px",
              backgroundColor: "var(--mainGray)",
              cursor: "pointer"
            },
            tabIndex: 0,
            id: id + "_button",
            onClick: onClickFunction,
            onKeyDown: onKeyPressFunction,
            children: [
              icon,
              " ",
              SVs.sectionName,
              " ",
              SVs.message,
              " (click to ",
              openCloseText,
              ")"
            ]
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: infoBlockStyle, children: childrenToRender })
      ]
    }
  );
});
export {
  solution as default
};
