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 { b as faLightbulb } from "./index-D_-RBdRX.js";
import { a as faLightbulb$1 } from "./index-CwWLcRpc.js";
import { a as addCommasForCompositeRanges } from "./composites-DgtFnuE1.js";
const hint = React__default.memo(function Hint(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (!SVs.showHints) {
    return null;
  }
  let title;
  let removedChildInd = null;
  if (SVs.titleChildName) {
    for (let [ind, child] of children.entries()) {
      if (child && typeof child === "object" && "props" in child && child?.props?.componentInstructions.componentIdx === SVs.titleChildName) {
        title = children[ind];
        children.splice(ind, 1);
        removedChildInd = ind;
        break;
      }
    }
  }
  if (!title) {
    title = SVs.title;
  }
  let icon = /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faLightbulb });
  let info = null;
  let infoBlockStyle = { display: "none" };
  let onClickFunction = () => {
    callAction({
      action: actions.revealHint
    });
  };
  let onKeyPressFunction = (e) => {
    if (e.key === "Enter") {
      callAction({
        action: actions.revealHint
      });
    }
  };
  let openCloseText = "open";
  if (SVs.open) {
    if (SVs._compositeReplacementActiveRange) {
      children = addCommasForCompositeRanges({
        children,
        compositeReplacementActiveRange: SVs._compositeReplacementActiveRange,
        startInd: 0,
        endInd: children.length - 1,
        removedInd: removedChildInd
      });
    }
    openCloseText = "close";
    icon = /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faLightbulb$1 });
    info = children;
    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.closeHint
        });
      }
    };
    onClickFunction = () => {
      callAction({
        action: actions.closeHint
      });
    };
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("aside", { id, ref, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "span",
      {
        className: "hint-title",
        style: {
          margin: SVs.open ? "12px 4px 0px 4px" : "12px 4px 12px 4px",
          borderBottomLeftRadius: SVs.open ? "0px" : "5px",
          borderBottomRightRadius: SVs.open ? "0px" : "5px"
        },
        tabIndex: 0,
        "data-test": "hint-heading",
        onClick: onClickFunction,
        onKeyDown: onKeyPressFunction,
        children: [
          " ",
          icon,
          " ",
          title,
          " (click to ",
          openCloseText,
          ")"
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: infoBlockStyle, children: info })
  ] }, id);
});
export {
  hint as default
};
