import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { ButtonVariant as b } from "../Button/types.js";
import { useClickOutside as C } from "../../../hooks/element/useClickOutside.js";
import { useResponsiveContainer as w, containerQueries as g } from "../../../hooks/useResponsiveContainer.js";
import N, { getDeepActiveElement as R } from "../../../primitives/dom/tabbableRoot/tabbable.js";
import E from "../../../hooks/element/useFocusTrap.js";
import { useContext as M, useRef as u, useCallback as k, useEffect as T } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { Fragment as A, createContext as B } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import s from "classnames";
/* empty css           */
import I from "../../../core/Context/preact/useCoreContext.js";
import F from "../Button/Button.js";
import { Icon as Q } from "../Icon/Icon.js";
const p = B({ withinModal: !1 }), W = () => M(p);
function X({
  title: n,
  children: f,
  classNameModifiers: h = [],
  isOpen: a,
  onClose: c,
  isDismissible: t = !0,
  headerWithBorder: y = !0,
  size: o = "fluid",
  ...v
}) {
  const { i18n: x } = I(), _ = w(g.down.xs), d = u(null), i = u(null), m = k(() => {
    a && t && (i.current?.focus(), c());
  }, [a, t, c]), l = E(C(null, m), m);
  return T(() => {
    if (a && l.current) {
      i.current = R();
      let r = N();
      return d.current?.focus(), r.root = l.current, r.current = 1, d.current?.remove(), () => {
        r.root = null, r = null;
      };
    }
  }, [a, l]), /* @__PURE__ */ e(A, { children: a && /* @__PURE__ */ e(
    "div",
    {
      className: s(
        "adyen-pe-modal-wrapper",
        h.map((r) => `adyen-pe-modal-wrapper--${r}`),
        { "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": t }
      ),
      role: "dialog",
      "aria-modal": "true",
      "aria-hidden": "false",
      ...v,
      children: /* @__PURE__ */ e(p.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
        "div",
        {
          className: s("adyen-pe-modal", {
            "adyen-pe-modal--fluid": o === "fluid",
            "adyen-pe-modal--small": o === "small",
            "adyen-pe-modal--large": o === "large",
            "adyen-pe-modal--extra-large": o === "extra-large",
            "adyen-pe-modal--full-screen": o === "full-screen" || _
          }),
          ref: l,
          children: [
            /* @__PURE__ */ e("div", { className: "adyen-pe-visually-hidden", ref: d, tabIndex: -1 }),
            /* @__PURE__ */ e(
              "div",
              {
                className: s("adyen-pe-modal__header", {
                  "adyen-pe-modal__header--with-title": n,
                  "adyen-pe-modal__header--with-border-bottom": y
                }),
                children: [
                  n && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header-title", children: n }),
                  t && /* @__PURE__ */ e(
                    F,
                    {
                      onClick: m,
                      variant: b.TERTIARY,
                      iconButton: !0,
                      classNameModifiers: ["circle"],
                      className: "adyen-pe-modal__dismiss-button",
                      "aria-label": x.get("common.modal.controls.dismiss.label"),
                      children: /* @__PURE__ */ e(Q, { name: "cross" })
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: f })
          ]
        }
      ) })
    }
  ) });
}
export {
  X as default,
  W as useModalContext
};
