import { jsx as i } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useResponsiveContainer as b, containerQueries as M } from "../../../../../hooks/useResponsiveContainer.js";
import H from "../../components/FilterButton/FilterButton.js";
import j from "../../../Popover/Popover.js";
import { PopoverContainerPosition as L, PopoverContainerVariant as Q } from "../../../Popover/types.js";
import { TypographyVariant as _, TypographyElement as D } from "../../../Typography/types.js";
import I from "../../../Typography/Typography.js";
import { memo as G } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
import { useMemo as E, useRef as V, useCallback as R, useEffect as v, useState as J } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import m from "../../../../../hooks/useBooleanState.js";
import K from "../../../../../hooks/useUniqueId.js";
import W from "../../../FormFields/InputText.js";
import X from "../../../../../hooks/useCommitAction/useCommitAction.js";
import { Fragment as Z } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import { isEmptyString as ee } from "../../../../../utils/value/string.js";
import { isNull as te } from "../../../../../utils/value/is.js";
import { CommitAction as T } from "../../../../../hooks/useCommitAction/types.js";
const ae = (r) => !r || ee(r), ie = /* @__PURE__ */ (() => {
  const r = (s) => {
    const { editAction: e, name: g, onChange: t, onValueUpdated: u } = s, [c, d] = J(s.value), a = V(null), f = R(
      (n) => {
        const p = n.target.value.trim();
        d(p), u(p);
      },
      [u]
    );
    return v(() => {
      (function n() {
        a.current ? a.current.focus() : requestAnimationFrame(n);
      })();
    }, [a]), v(() => {
      e === T.CLEAR && (d(""), u(""), t("")), e === T.APPLY && t(c ?? "");
    }, [c, e, t, u]), /* @__PURE__ */ i(W, { ref: a, name: g, value: c, onInput: f });
  };
  return (s) => /* @__PURE__ */ i(r, { ...s });
})(), ne = ({ render: r, ["aria-label"]: s, ...e }) => {
  const g = b(M.down.xs), [t, u] = m(!1), [c, d] = m(!1), a = E(() => e.isValueEmpty ?? ae, [e.isValueEmpty]), [f, n] = m(a(e.value)), [p, h] = m(!1), [w, A] = m(!1), [x, F] = m(a(e.value)), C = V(null), P = `elem-${K()}`, k = E(() => r ?? ie, [r]), q = R(
    (o) => {
      const l = a(o ?? void 0);
      n(l), F(te(o)), A(p ? o !== e.value : !l);
    },
    [a, n, F, A, p, e.value]
  ), { commitAction: U, commitActionButtons: Y, committing: B, resetCommitAction: N } = X({
    applyDisabled: x || !w,
    resetDisabled: f,
    onResetAction: e?.onResetAction
  }), O = V(!1), [y, S] = E(() => {
    const o = (l) => () => {
      l === t || l && O.current || (l && (N(), A(!1), h(!1)), u(l), d(l));
    };
    return [o(!1), o(!0)];
  }, [u, t, N, d, h, A]);
  v(() => {
    if (c) {
      const o = a(e.value);
      d(!1), n(o), h(!o);
    }
  }, [e.value, c, a, d, n, h]), v(() => {
    B && y();
  }, [B, y]), v(() => {
    O.current = t;
  }, [t]);
  const $ = b(M.only.sm), z = b(M.only.md);
  return /* @__PURE__ */ i(Z, { children: [
    /* @__PURE__ */ i("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
      () => /* @__PURE__ */ i(
        H,
        {
          classNameModifiers: [
            ...e.appliedFilterAmount ? ["with-counter"] : [],
            ...e.classNameModifiers ?? [],
            ...t ? ["active"] : [],
            ...f ? [] : ["has-selection"]
          ],
          "aria-haspopup": "dialog",
          "aria-expanded": t,
          "aria-label": s,
          id: P,
          onClick: t ? y : S,
          ref: C,
          tabIndex: 0,
          children: /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__default-container", children: [
            /* @__PURE__ */ i(I, { el: D.SPAN, variant: _.BODY, className: "adyen-pe-filter-button__label", children: e.label }),
            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
              I,
              {
                el: D.SPAN,
                variant: _.BODY,
                stronger: !0,
                className: "adyen-pe-filter-button__counter",
                children: e.appliedFilterAmount
              }
            ) })
          ] })
        }
      ),
      [
        e.appliedFilterAmount,
        e.classNameModifiers,
        e.label,
        t,
        f,
        y,
        S,
        C,
        s,
        P
      ]
    ) }),
    t && /* @__PURE__ */ i(
      j,
      {
        actions: Y,
        title: e.title?.trim(),
        variant: Q.POPOVER,
        modifiers: ["filter"],
        open: t,
        dismiss: y,
        dismissible: !1,
        withContentPadding: e.withContentPadding ?? !0,
        divider: !0,
        targetElement: C,
        disableFocusTrap: !1,
        position: L.BOTTOM,
        containerSize: e.containerSize,
        showOverlay: g,
        fitPosition: $ || z,
        children: k({ ...e, editAction: U, onValueUpdated: q })
      }
    )
  ] });
}, be = G(ne);
export {
  be as default
};
