import { j as jsxRuntimeExports, h as Button } from "./doenetml-cB_aZGJ5.js";
import React__default, { useState } from "react";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { T as TooltipProvider, a as TooltipAnchor, b as Tooltip } from "./tooltip-provider-CHxHcyV8.js";
const footnote = React__default.memo(function Footnote(props) {
  let { id, SVs } = useDoenetRenderer(props, false);
  let [isVisible, setIsVisible] = useState(false);
  if (SVs.hidden) {
    return null;
  }
  const footnoteMessageStyle = {
    padding: "10px",
    borderRadius: "5px",
    backgroundColor: "#e2e2e2",
    display: "block"
  };
  let footnoteMessage = "";
  if (isVisible) {
    footnoteMessage = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: footnoteMessageStyle, children: SVs.text });
  }
  const buttonStyle = {
    backgroundColor: "white",
    border: "none",
    color: "#1A5A99",
    padding: "0"
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { id, children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("sup", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(
        TooltipAnchor,
        {
          render: /* @__PURE__ */ jsxRuntimeExports.jsx(
            Button,
            {
              style: buttonStyle,
              onClick: () => {
                setIsVisible((was) => !was);
              }
            }
          ),
          children: [
            "[",
            SVs.footnoteTag,
            "]"
          ]
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(
        Tooltip,
        {
          style: {
            backgroundColor: "var(--mainGray)",
            padding: "0.2em 0.5em"
          },
          children: [
            isVisible ? "Hide" : "Show",
            " footnote"
          ]
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-live": "polite", children: footnoteMessage })
  ] });
});
export {
  footnote as default
};
