import { jsxs as p, jsx as x } from "react/jsx-runtime";
import { useState as u, useLayoutEffect as j, useEffect as z, useId as B } from "react";
import { Classes as H } from "../../constants/selectors.js";
import { useExpandableMemory as I } from "../../hooks/use-expandable-memory.js";
import { cn as s } from "../../utils/cn.js";
import { Icon as G } from "../icon/icon.js";
const v = "expandable-content", J = "Hide", K = "Show", Q = "child attributes", P = ({
  title: o = Q,
  defaultOpen: n = !1,
  onChange: b,
  lazy: N,
  className: T,
  children: L,
  uniqueParamId: r,
  onMount: a,
  onOpen: d,
  onClose: i,
  openedText: S = J,
  closedText: _ = K,
  hasScrolledToAnchorRef: c,
  anchor: l
}) => {
  const f = !!r, {
    ref: k,
    isExpanded: D,
    onManualToggle: w,
    isInSessionStorage: A
  } = I(r || "", n), [y, C] = u(n), F = !!(r && (l != null && l.includes(r))) && !(c != null && c.current), e = f ? (
    // biome-ignore lint/style/noNestedTernary: TODO
    F ? !0 : (
      // biome-ignore lint/style/noNestedTernary: TODO
      A ? D : n
    )
  ) : y, [m, E] = u(
    e || !N
  );
  j(() => {
    e && !m && E(!0);
  }, [e, m]), z(() => {
    a == null || a();
  }, []);
  const U = (t) => {
    E(!0), b && b(t), t ? d == null || d() : i == null || i();
  }, X = (t) => {
    f ? w(t) : C(t), U(t);
  }, $ = B(), g = `${o}-${$}-content`.replace(/\s+/g, "-");
  return /* @__PURE__ */ p(
    "details",
    {
      className: s(
        H.Expandable,
        "mt-4 rounded-xl border-standard",
        T
      ),
      "data-component-part": "expandable",
      "data-testid": r ? `${r}-children` : void 0,
      onToggle: (t) => {
        const h = t.currentTarget.open;
        h !== e && X(h);
      },
      open: e,
      ref: k,
      children: [
        /* @__PURE__ */ p(
          "summary",
          {
            "aria-controls": g,
            "aria-expanded": e,
            className: s(
              "not-prose flex w-full cursor-pointer flex-row content-center items-center text-sm",
              "rounded-t-xl px-3.5 py-3 text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-white/5 dark:hover:text-stone-200",
              "list-none [&::-webkit-details-marker]:hidden",
              !e && "rounded-b-xl"
            ),
            "data-component-part": "expandable-button",
            children: [
              /* @__PURE__ */ x(
                G,
                {
                  className: s(
                    "size-2.5 bg-stone-400 transition-transform",
                    e && "rotate-90"
                  ),
                  "data-component-part": "expandable-icon",
                  icon: "angle-right",
                  overrideColor: !0,
                  overrideSize: !0
                }
              ),
              /* @__PURE__ */ x("div", { className: "ml-3 text-left leading-tight", children: /* @__PURE__ */ p("p", { className: "m-0", contentEditable: !1, children: [
                e ? S : _,
                " ",
                o
              ] }) })
            ]
          }
        ),
        /* @__PURE__ */ x(
          "div",
          {
            className: s(
              v,
              "mx-3 border-stone-100 border-t px-2 dark:border-white/10"
            ),
            "data-component-part": v,
            id: g,
            children: m && L
          }
        )
      ]
    },
    o
  );
};
export {
  P as Expandable
};
