import { jsxs as c, jsx as l, Fragment as mt } from "react/jsx-runtime";
/* empty css                     */
import { REGEX as Ie } from "./index-regex.js";
import { useAppDispatch as vt } from "./index-use-app-dispatch.js";
import { useWindowResize as ft } from "./index-use-window.resize.js";
import { classNames as yt } from "./index-classNames.js";
import { debounce as bt } from "./index-debounce.js";
import { preventInput as kt } from "./index-prevent-input.js";
import { sanitizeHtml as xt } from "./index-sanitize-html.js";
import { highlightedTextMaxLength as Ct } from "./index-string-helpers.js";
import { isValidHexColor as Pt } from "./index-hex-color.js";
import { translationService as E } from "./index-translation.service.js";
import { Icon as Se } from "./index-Icon.js";
import { IconNames as Te } from "./index-IconNames.js";
import { Link as It } from "./index-Link.js";
import { Popover as St } from "./index-Popover.js";
import { Render as _ } from "./index-Render.js";
import { Text as M, FontWeights as H } from "./index-Text.js";
import Tt, { useRef as Ve, useState as D, useEffect as v } from "react";
import W from "./index-Skeleton2.js";
import Vt from "./index-TextField.js";
const Qt = (P) => {
  var me, ve, fe, ye;
  const {
    id: Fe,
    className: Ne,
    formFieldType: n = "InputBase",
    type: Re = "Text",
    roundedNumericCTAType: $ = !1,
    value: i,
    defaultValue: Ae,
    valueAsDefaultValue: j,
    placeholder: O,
    disabled: Le,
    label: f,
    labelType: y = "floating",
    infoText: U,
    popoverMessage: K,
    popoverPosition: we = "top",
    multiline: q,
    rows: Be,
    minRows: z = 3,
    maxRows: G = 6,
    allowBreakLines: R,
    highlightUrl: I,
    highlightWords: S,
    prohibitedWords: b,
    highlightLengthExceeded: X,
    counter: Ee,
    select: J = !1,
    selectRenderValue: _e,
    selectDisplayEmpty: Ft,
    menuItemHeight: Me = 36,
    maxMenuItemsUntilScroll: He = 7,
    formconfig: e,
    children: De,
    onFocus: Q,
    onBlur: Y,
    onKeyUp: Z,
    onKeyDown: ee,
    onInput: te,
    onClick: re,
    onChange: T,
    onStepUpNumericClick: ae,
    onStepDownNumericClick: ne,
    testId: We,
    isLoading: A,
    adornment: le,
    endAdornment: ie,
    textFieldProps: o = {},
    replacements: L,
    onProhibitedWordFound: ue,
    onHighlightWordFound: se,
    triggerChangeOnStateFieldChange: $e,
    theme: je = "default",
    autoFocus: Oe,
    highlightUrlType: oe = "negative",
    popoverHighlight: Nt,
    helperLinkText: pe,
    onHelperLinkClick: de,
    helperLinkDisabled: Ue,
    helperLinkHref: Ke,
    labelStyle: p
  } = P;
  let {
    maxLength: g
  } = P;
  const qe = ft(100);
  e && (e.fieldType = n);
  let {
    inputRef: u
  } = P;
  e ? u = e._inputRef : u || (u = Ve(null));
  const [V, k] = D((i && typeof i == "string" && i.length) ?? 0), F = () => {
    B && s && s.current && u && u.current && (s.current.style.height = `${u.current.getBoundingClientRect().height.toString()}px`, s.current.style.width = `${u.current.getBoundingClientRect().width.toString()}px`, s.current.scrollTop = u.current.scrollTop, s.current.scrollLeft = u.current.scrollLeft);
  }, he = Tt.useMemo(() => bt(F, 100), [F]);
  v(() => {
    k(typeof i == "string" ? i.length : 0);
  }, [i]), v(() => {
    he();
  }, [qe, he]), e && e != null && e.validation && "maxLength" in (e == null ? void 0 : e.validation) && (g = (me = e == null ? void 0 : e.validation) == null ? void 0 : me.maxLength);
  let {
    required: w
  } = P;
  (((ve = e == null ? void 0 : e.validation) == null ? void 0 : ve.required) === !0 || ((fe = e == null ? void 0 : e.validation) == null ? void 0 : fe.required) === !1) && (w = (ye = e == null ? void 0 : e.validation) == null ? void 0 : ye.required);
  let [d, ze] = D((e == null ? void 0 : e.hasError) ?? !1);
  e && (d = !!e.hasError), e != null && e.setHasError && (ze = e.setHasError), v(() => {
    e && (e.hasError = d);
  }, [d]), v(() => {
    var t;
    if (e) {
      e.hasError = d;
      const r = (t = e._inputRef) == null ? void 0 : t.current;
      n !== "Autocomplete" && e.stateValue && r && (r.value = e == null ? void 0 : e.stateValue, $e && T && T({
        target: {
          value: e == null ? void 0 : e.stateValue
        }
      })), e.stateValue && k(e.stateValue.length);
    }
  }, [e == null ? void 0 : e.stateValue]), v(() => {
    N(e == null ? void 0 : e.stateValue);
  }, [e == null ? void 0 : e.stateValue, b]), v(() => {
    i && I && typeof i == "string" && N(i);
  }, [I, i, oe]);
  const Ge = () => f ? y === "static" ? {
    shrink: !0,
    style: p
  } : y === "outer" ? {
    shrink: !0,
    style: p
  } : null : {
    shrink: !0,
    style: p
  }, Xe = () => !f || y === "hidden" ? "vanguard-label-hidden" : y === "outer" ? "vanguard-label-outer" : "", Je = () => !f || y === "hidden" ? null : c(mt, {
    children: [E.get(f, L).value, !w && l("span", {
      className: "vanguard-input-label-optional",
      style: {
        color: p != null && p.color ? `rgb(from ${p.color} r g b / 0.7)` : void 0
      },
      children: E.get("Optional", void 0).value
    })]
  }), Qe = c("div", {
    style: {
      marginRight: "20px",
      display: "flex",
      flexDirection: "row",
      gap: "8px",
      cursor: "pointer"
    },
    children: [l(Se, {
      role: "button",
      testId: "button-step-down",
      onClick: (t) => {
        ne && ne(t);
      },
      color: "var(--n500)",
      fillColor: "var(--n100)",
      hasCircle: !0,
      children: Te.remove
    }), l(Se, {
      role: "button",
      testId: "button-step-up",
      onClick: (t) => {
        ae && ae(t);
      },
      color: "var(--n500)",
      fillColor: "var(--n100)",
      hasCircle: !0,
      children: Te.add
    })]
  }), ce = (t) => t || null, Ye = () => ce(le), Ze = () => ce(ie);
  le && (o.InputProps = {
    ...o.InputProps,
    startAdornment: Ye()
  }), ie && (o.InputProps = {
    ...o.InputProps,
    endAdornment: Ze()
  }), n == "InputNumber" && $ && (o.InputProps = {
    ...o.InputProps,
    endAdornment: Qe
  });
  const et = () => {
    var x;
    const t = {
      field_name: f,
      length: V || "0",
      ...e == null ? void 0 : e.validation,
      ...(x = e == null ? void 0 : e.validation) == null ? void 0 : x.replacements,
      ...L
      // Info Text translation variables
    };
    let r = "";
    d ? r = l(M, {
      className: "vanguard-input-error-text",
      testId: "vanguard-input-error-text",
      fontWeight: H.regular,
      color: "--e500",
      replacements: t,
      "aria-live": "polite",
      "aria-atomic": "true",
      children: e != null && e.errors ? e == null ? void 0 : e.errors[0] : null
    }) : U && (r = l(M, {
      className: "vanguard-input-info-text",
      fontWeight: H.regular,
      replacements: t,
      children: U
    }));
    let a;
    Ee && (a = c(M, {
      className: "vanguard-input-counter",
      fontWeight: H.regular,
      color: d ? "--e500" : "",
      translate: !1,
      children: [V || "0", g && `/${g}`]
    }));
    let m;
    return pe && de && (m = l(It, {
      onClick: () => {
        de(i ?? "");
      },
      className: "vanguard-input-helper-link-button",
      disabled: Ue,
      href: Ke,
      children: pe
    })), !r && !a && !m ? null : c("span", {
      className: "vanguard-input-bottom-container",
      children: [l(_, {
        if: !!r || !!a,
        children: c("span", {
          className: "vanguard-input-bottom-container-line",
          children: [r, a]
        })
      }), m]
    });
  }, B = X || S || I || b, s = Ve(null), [tt, ge] = D({
    __html: ""
  }), N = (t) => {
    if (B || ge({
      __html: ""
    }), X && g && (t == null ? void 0 : t.length) > g && (t = Ct(t, g, "vanguard-input-mark-red")), S && S.length && S.forEach((a) => {
      t = t == null ? void 0 : t.replace(a, `<span class="vanguard-input-mark-green">${a}</span>`), t != null && t.includes(a) && se && se(a, e);
    }), b && b.length && b.forEach((a) => {
      t = t == null ? void 0 : t.replace(a, `<span class="vanguard-input-mark-red">${a}</span>`), t != null && t.includes(a) && ue && ue(a, e);
    }), I && t && t.search(Ie.url) >= 0) {
      let a = "";
      switch (oe) {
        case "negative":
          a = "vanguard-input-mark-red";
          break;
        case "positive":
          a = "vanguard-input-mark-green";
          break;
        case "info":
          a = "vanguard-input-mark-blue";
          break;
      }
      t = t.replace(Ie.url, `<span class="${a}">$&</span>`);
    }
    const r = xt(t, {
      allowedAttributes: {
        span: ["class"]
      },
      allowedClasses: ["vanguard-input-mark-red", "vanguard-input-mark-green", "vanguard-input-mark-blue"]
    });
    ge({
      __html: r
    });
  }, rt = () => {
    if (O)
      return E.get(O, L).value;
  }, at = (t) => K ? l(St, {
    position: we,
    message: K,
    wrapChildren: !1,
    children: t
  }) : t, nt = () => q ? {
    multiline: q,
    rows: Be,
    minRows: z,
    maxRows: G
  } : null, lt = () => J ? {
    select: J,
    SelectProps: {
      renderValue: _e,
      MenuProps: {
        PaperProps: {
          style: {
            maxHeight: Me * He
          }
        }
      }
    }
  } : null, it = (t) => {
    Q && Q(t);
  }, ut = (t) => {
    Y && Y(t);
  }, st = (t) => {
    Z && Z(t);
  }, ot = (t) => {
    ee && ee(t), t.code === "Enter" && !R && t.preventDefault(), kt(t, e, i);
  }, pt = (t) => {
    te && te(t);
  }, dt = (t) => {
    re && re(t);
  }, h = vt(), ht = (t) => {
    var a, m, x, be, ke, xe, Ce, Pe;
    T && T(t);
    let r;
    if (e) {
      if (e.setStateValue) {
        if (n == "InputBase" || n == "Input" || n == "InputNumber" || n == "ColorPicker")
          if (r = t.currentTarget.value, (a = e.valueMappers) != null && a.toObject && (r = e.valueMappers.toObject(r)), e.arrayPosition !== void 0 && e.setStateValueArray)
            h(e.setStateValueArray({
              el: r,
              idx: e.arrayPosition
            }));
          else {
            let C = r;
            n == "InputNumber" && (C = parseInt(C)), n == "ColorPicker" ? Pt(C) && h(e.setStateValue(C)) : h(e.setStateValue(C));
          }
        n == "Textarea" && (r = t.currentTarget.value, R || (r = t.currentTarget.value.replace(/(\r\n|\n|\r)/gm, " ")), (m = e.valueMappers) != null && m.toObject && (r = e.valueMappers.toObject(r)), e.arrayPosition !== void 0 && e.setStateValueArray ? h(e.setStateValueArray({
          el: r,
          idx: e.arrayPosition
        })) : h(e.setStateValue(r))), n == "Select" && (r = ((x = t.currentTarget) == null ? void 0 : x.value) || ((be = t.target) == null ? void 0 : be.value), (ke = e.valueMappers) != null && ke.toObject && (r = e.valueMappers.toObject(r)), e.arrayPosition !== void 0 && e.setStateValueArray ? h(e.setStateValueArray({
          el: r,
          idx: e.arrayPosition
        })) : h(e.setStateValue(r)));
      }
      n === "Select" && ((xe = e._inputRef) != null && xe.current) && (e._inputRef.current.value = ((Ce = t.target) == null ? void 0 : Ce.value) ?? ""), e != null && e._onChange && (e == null || e._onChange());
    } else
      r = ((Pe = t.currentTarget) == null ? void 0 : Pe.value) ?? "";
    k(r && typeof r == "string" ? r.length : 0), B && s && s.current && u && u.current && (s.current.style.height = `${u.current.getBoundingClientRect().height.toString()}px`, s.current.style.width = `${u.current.getBoundingClientRect().width.toString()}px`, N(R ? t.currentTarget.value : t.currentTarget.value.replace(/(\r\n|\n|\r)/gm, " ")));
  }, ct = () => {
    setTimeout(() => {
      F();
    }, 0);
  }, gt = () => {
    F();
  };
  return at(c("div", {
    className: yt("vanguard-input", Ne, Xe(), je === "grey" ? "vanguard-input-grey" : "", A ? "vanguard-input-loading" : "", $ ? "vanguard-input-type-number-rounded" : "", n === "ColorPicker" ? "vanguard-input-type-colorpicker" : ""),
    onClick: (t) => dt(t),
    children: [l("div", {
      className: "vanguard-input-backdrop",
      ref: s,
      children: l("div", {
        className: "vanguard-input-highlights",
        dangerouslySetInnerHTML: tt
      })
    }), l(_, {
      if: A && n == "Textarea",
      children: c("div", {
        className: "vanguard-input-skeleton",
        ref: s,
        children: [[...Array(Math.min(z, G))].map((t, r) => l(W, {
          height: 16,
          width: "100%"
        }, r)), l(W, {
          height: 16,
          width: "80%"
        })]
      })
    }), l(_, {
      if: A && (n == "Input" || n == "InputBase" || n == "InputNumber" || n == "Autocomplete"),
      children: l("div", {
        className: "vanguard-input-skeleton",
        ref: s,
        children: l(W, {
          height: 42,
          width: "100%"
        })
      })
    }), l(Vt, {
      autoFocus: Oe,
      variant: "outlined",
      id: Fe,
      "data-testid": We,
      fullWidth: !0,
      label: Je(),
      InputLabelProps: Ge() ?? void 0,
      type: Re,
      value: j ? void 0 : i,
      defaultValue: j ? i : Ae,
      placeholder: rt(),
      helperText: l(et, {}),
      error: d,
      required: w,
      disabled: Le,
      role: "textbox",
      ...nt(),
      ...lt(),
      onFocus: (t) => it(t),
      onBlur: (t) => ut(t),
      onKeyUp: (t) => st(t),
      onKeyDown: (t) => ot(t),
      onInput: (t) => pt(t),
      onChange: (t) => ht(t),
      onPaste: () => ct(),
      inputRef: u,
      ...o,
      inputProps: {
        ...o.inputProps ?? {},
        onScroll: () => {
          gt();
        }
      },
      children: De
    })]
  }));
};
export {
  Qt as InputBase
};
