import { v as memo2, w as forwardRef2, x as createHook, y as createElement, z as usePopoverContext, F as invariant, G as useStoreState, H as useId, j as jsxRuntimeExports, I as useMergeRefs, J as removeUndefinedValues, K as useSafeLayoutEffect, L as getWindow, N as usePopoverStore, P as PopoverDisclosure, O as MdInfoOutline, Q as Popover } from "./doenetml-cB_aZGJ5.js";
import { useMemo, useState, useRef } from "react";
var POPOVER_ARROW_PATH = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z";
var TagName = "div";
var defaultSize = 30;
var halfDefaultSize = defaultSize / 2;
var rotateMap = {
  top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,
  right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,
  bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,
  left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`
};
function useComputedStyle(store) {
  const [style, setStyle] = useState();
  const contentElement = useStoreState(store, "contentElement");
  useSafeLayoutEffect(() => {
    if (!contentElement) return;
    const win = getWindow(contentElement);
    const computedStyle = win.getComputedStyle(contentElement);
    setStyle(computedStyle);
  }, [contentElement]);
  return style;
}
function getRingWidth(style) {
  var _a;
  if (!style) return;
  const boxShadow = style.getPropertyValue("box-shadow");
  const ringWidth = (_a = boxShadow.match(/0px 0px 0px ([^0]+px)/)) == null ? void 0 : _a[1];
  return ringWidth;
}
function getBorderColor(dir, style) {
  if (!style) return;
  const borderColor = style.getPropertyValue(`border-${dir}-color`);
  if (borderColor) return borderColor;
  const boxShadow = style.getPropertyValue("box-shadow");
  const match = boxShadow.match(/0px 0px 0px [^,]+/);
  if (!match) return;
  const segment = match[0];
  const ringColor = segment.replace(/^0px 0px 0px\s+[^\s,]+/, "").trim();
  return ringColor || void 0;
}
var usePopoverArrow = createHook(
  function usePopoverArrow2({
    store,
    size = defaultSize,
    borderWidth: borderWidthProp,
    ...props
  }) {
    const context = usePopoverContext();
    store = store || context;
    invariant(
      store,
      process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
    );
    const dir = useStoreState(
      store,
      (state) => state.currentPlacement.split("-")[0]
    );
    const maskId = useId();
    const style = useComputedStyle(store);
    const stroke = getBorderColor(dir, style) || "none";
    const fill = (style == null ? void 0 : style.getPropertyValue("background-color")) || "none";
    const [borderWidth, isRing] = useMemo(() => {
      if (borderWidthProp != null) return [borderWidthProp, false];
      if (!style) return [0, false];
      const ringWidth = getRingWidth(style);
      if (ringWidth) return [Number.parseInt(ringWidth, 10), true];
      const borderWidth2 = style.getPropertyValue(`border-${dir}-width`);
      if (borderWidth2)
        return [Math.ceil(Number.parseFloat(borderWidth2)), false];
      return [0, false];
    }, [borderWidthProp, style, dir]);
    const strokeWidth = borderWidth * 2 * (defaultSize / size);
    const transform = rotateMap[dir];
    const children = useMemo(
      () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { transform, children: [
        !isRing && // When using the CSS border property, set the fill color to match
        // the background behind the stroke so transparent strokes match
        // the appearance of borders on HTML elements.
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "path",
          {
            fill: "none",
            stroke: `var(--ak-layer, ${fill})`,
            d: POPOVER_ARROW_PATH,
            mask: `url(#${maskId})`
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: POPOVER_ARROW_PATH, mask: `url(#${maskId})` }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "none", d: POPOVER_ARROW_PATH }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          "rect",
          {
            x: "-15",
            y: "0",
            width: "60",
            height: "30",
            fill: "white",
            stroke: "black"
          }
        ) })
      ] }) }),
      [transform, isRing, fill, maskId]
    );
    props = {
      children,
      "aria-hidden": true,
      ...props,
      ref: useMergeRefs(store.setArrowElement, props.ref),
      style: {
        position: "absolute",
        fontSize: size,
        width: "1em",
        height: "1em",
        pointerEvents: "none",
        fill: `var(--ak-layer, ${fill})`,
        stroke: `var(--ak-layer-border, ${stroke})`,
        strokeWidth,
        ...props.style
      }
    };
    return removeUndefinedValues(props);
  }
);
var PopoverArrow = memo2(
  forwardRef2(function PopoverArrow2(props) {
    const htmlProps = usePopoverArrow(props);
    return createElement(TagName, htmlProps);
  })
);
function DescriptionAsDetails({ children }) {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "description", "data-test": "Description", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { title: "more information", "data-test": "Description Summary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MdInfoOutline, {}) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "details-content", children })
  ] });
}
function DescriptionPopover({ children }) {
  const popover = usePopoverStore();
  const popoverRef = useRef(null);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      PopoverDisclosure,
      {
        store: popover,
        className: "description-popover-button",
        title: "more information",
        "data-test": "Description Button",
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MdInfoOutline, {})
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsxs(
      Popover,
      {
        store: popover,
        ref: popoverRef,
        initialFocus: popoverRef,
        gutter: 2,
        className: "description-popover",
        "data-test": "Description",
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverArrow, {}),
          children
        ]
      }
    )
  ] });
}
export {
  DescriptionPopover as D,
  DescriptionAsDetails as a
};
