import { jsx as s } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import n from "classnames";
import { useState as T, useMemo as x, useCallback as b, useRef as i, useLayoutEffect as z, useEffect as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { useClickOutside as U } from "../../../hooks/element/useClickOutside.js";
import V from "../../../hooks/useUniqueId.js";
/* empty css                    */
import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as Y, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as H, CHEVRON_CLASS as k, CONTAINER_CLASS as E, CONTAINER_BUTTON_CLASS as B, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as $, CONTAINER_IN_FLOW_CLASS as j, CONTAINER_HIDDEN_CLASS as G } from "./constants.js";
import { Fragment as D } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import F from "../BaseButton/BaseButton.js";
import { Icon as P } from "../Icon/Icon.js";
import { isFunction as M } from "../../../utils/value/is.js";
const ae = ({ renderContent: a, children: O, filled: c, fullWidth: S, inFlow: _, ...d }) => {
  const [e, R] = T(!1), [v, h] = T(0), t = x(() => _ === !0, [_]), o = b(() => R((r) => !r), [R]), L = i(null), l = i(null), u = `elem-${V()}`, f = i(!1), I = i(e), m = U(
    void 0,
    b(() => {
      e && (o(), f.current = !0);
    }, [e, o])
  ), p = x(
    () => M(a) ? a : ({ collapsibleContent: r }) => /* @__PURE__ */ s(D, { children: [
      a,
      r && /* @__PURE__ */ s("div", { children: r })
    ] }),
    [a]
  );
  return z(() => {
    const r = L.current;
    r && (t ? r.style.setProperty(y, `${v}px`) : e || r.style.removeProperty(y));
  }, [v, t, e]), g(() => {
    if (!t) return void h(0);
    const r = l.current;
    if (!r) return;
    const N = new ResizeObserver((q) => {
      for (const w of q)
        w.target === r && h(r.offsetHeight || 0);
    });
    return N.observe(r), () => {
      N.unobserve(r), N.disconnect();
    };
  }, [t]), g(() => {
    e ? m.current?.focus() : (I.current !== e && !f.current && l.current?.focus(), f.current = !1), I.current = e;
  }, [e, m]), /* @__PURE__ */ s("div", { ref: L, className: Y, children: O ? /* @__PURE__ */ s(D, { children: [
    /* @__PURE__ */ s(
      F,
      {
        className: n(E, B, { [A]: c }),
        disabled: e,
        fullWidth: S,
        onClick: o,
        ref: l,
        "data-testid": "expand-button",
        ...e ? { "aria-hidden": !0 } : { "aria-controls": u, "aria-expanded": !1 },
        ...d,
        children: [
          /* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e }) }),
          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-down" }) })
        ]
      }
    ),
    /* @__PURE__ */ s(
      F,
      {
        id: u,
        className: n(E, B, $, {
          [A]: c,
          [G]: !e,
          [j]: t
        }),
        disabled: !e,
        fullWidth: S,
        onClick: o,
        ref: m,
        "data-testid": "collapse-button",
        ...e ? { "aria-controls": u, "aria-expanded": !0 } : { role: "presentation" },
        ...d,
        children: [
          /* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e, collapsibleContent: O }) }),
          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-up" }) })
        ]
      }
    )
  ] }) : /* @__PURE__ */ s("div", { className: n(E, { [A]: c }), ...d, children: /* @__PURE__ */ s("div", { className: C, children: p({ isExpanded: !1 }) }) }) });
};
export {
  ae as default
};
