import { jsx as t } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import D from "classnames";
import { ARIA_ERROR_SUFFIX as k } from "../../../../../core/Errors/constants.js";
import { useState as w, useMemo as c, useRef as L, useCallback as _, useEffect as E } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { TypographyVariant as P, TypographyElement as C } from "../../../../internal/Typography/types.js";
import q from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
import T from "../../../../internal/Typography/Typography.js";
import M from "../../../../internal/FormFields/InputBase.js";
/* empty css                                   */
import N from "../../../../../core/Context/preact/useCoreContext.js";
import O from "../../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
import { Icon as Y } from "../../../../internal/Icon/Icon.js";
import S from "../../../../../utils/random/uniqueId.js";
import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
const f = "adyen-pe-psp-reference-filter", b = 16, m = {
  root: f,
  input: f + "__input",
  inputError: f + "__input-error",
  inputWithError: f + "__input--with-error",
  title: f + "__title"
}, ne = ({ eventCategory: d, eventSubCategory: a, onChange: l, value: n }) => {
  const { i18n: h } = N(), { logEvent: o } = q({ category: d, subCategory: a, label: "PSP reference filter" }), [r, e] = w(!1), R = c(() => h.get("transactions.overview.filters.types.paymentPspReference.label"), [h]), s = L(n), p = _(
    (i) => {
      s.current !== i && (s.current = i, o?.("update", null), l?.(i));
    },
    [o, l]
  ), y = _(() => e(!0), []);
  return E(() => {
    r && (e(!1), s.current !== n && o?.("reset"));
  }, [r, n, o]), /* @__PURE__ */ t(
    O,
    {
      "aria-label": R,
      label: n ?? R,
      onChange: p,
      onResetAction: y,
      value: n,
      render: (i) => /* @__PURE__ */ t(H, { ...i }),
      name: "pspReference"
    }
  );
}, H = ({
  editAction: d,
  onChange: a,
  onValueUpdated: l,
  name: n,
  type: h,
  value: o
}) => {
  const { i18n: r } = N(), [e, R] = w(o), s = L(null), p = c(S, []), y = c(S, []), i = c(() => {
    const v = { length: b };
    return r.get("transactions.overview.filters.types.paymentPspReference.errors.invalidLength", { values: v });
  }, [r]), u = e && e.length < b ? i : void 0, x = c(() => r.get("transactions.overview.filters.types.paymentPspReference.label"), [r]), V = c(() => r.get("transactions.overview.filters.types.paymentPspReference.placeholder"), [r]), B = (v) => {
    const g = v.currentTarget, I = g.selectionEnd, A = g.value.replace(/[^a-z\d]/gi, "").slice(0, b).toUpperCase();
    g.value = A, g.setSelectionRange(I, I), A !== e && R(A || void 0);
  };
  return E(() => {
    l(u ? o || void 0 : e);
  }, [e, u, l, o]), E(() => {
    switch (d) {
      case F.APPLY:
        a(e);
        break;
      case F.CLEAR:
        a();
        break;
    }
  }, [d, a, e]), E(() => {
    s.current && s.current.focus();
  }, []), /* @__PURE__ */ t("div", { className: m.root, children: [
    /* @__PURE__ */ t("div", { className: m.title, children: /* @__PURE__ */ t("label", { id: y, htmlFor: p, children: /* @__PURE__ */ t(T, { el: C.DIV, variant: P.BODY, strongest: !0, children: x }) }) }),
    /* @__PURE__ */ t("div", { className: D(m.input, { [m.inputWithError]: u }), children: /* @__PURE__ */ t(
      M,
      {
        autoComplete: "off",
        uniqueId: p,
        ref: s,
        placeholder: V,
        "data-testid": n,
        name: n,
        type: h,
        value: e,
        onInput: B
      }
    ) }),
    u && /* @__PURE__ */ t("div", { className: m.inputError, id: `${p}${k}`, children: [
      /* @__PURE__ */ t(Y, { name: "cross-circle-fill" }),
      /* @__PURE__ */ t(T, { el: C.SPAN, variant: P.BODY, children: u })
    ] })
  ] });
};
export {
  ne as default
};
