import { jsxs as T, jsx as e } from "react/jsx-runtime";
import { useFocusRing as f } from "@react-aria/focus";
import { forwardRef as z, useRef as et, useImperativeHandle as rt, useState as ot, useEffect as O } from "react";
import st from "../../foundation/Icon/Generated/IconCheckMark.es.js";
import it from "../../foundation/Icon/Generated/IconClipboard.es.js";
import nt from "../../foundation/Icon/Generated/IconCross.es.js";
import ct from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
import at from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
import lt from "../../foundation/Icon/Generated/IconEye.es.js";
import wt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
import { useCopy as ut } from "../../hooks/useCopy.es.js";
import { useMemoizedId as dt } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as m } from "../../utilities/focusStyle.es.js";
import { merge as i } from "../../utilities/merge.es.js";
import { validationClassMap as pt, Validation as u } from "../../utilities/validation.es.js";
import { LegacyTooltip as ft } from "../LegacyTooltip/LegacyTooltip.es.js";
import { LoadingCircle as mt, LoadingCircleSize as bt } from "../LoadingCircle/LoadingCircle.es.js";
var xt = /* @__PURE__ */ ((r) => (r.Text = "text", r.Password = "password", r.Number = "number", r.Search = "search", r))(xt || {});
const kt = ({ extraAction: r, disabled: a }, b) => {
  const { isFocusVisible: n, focusProps: k } = f();
  if (!r)
    return null;
  const d = a || r.disabled;
  return /* @__PURE__ */ e(
    "button",
    {
      className: i([
        "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1",
        d ? "tw-cursor-default tw-text-text-disabled" : "tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
        n && m
      ]),
      onClick: r.onClick,
      "data-test-id": "fondue-extra-action-icon",
      "aria-label": r.title.toLowerCase(),
      disabled: d,
      "aria-disabled": d,
      type: "button",
      ref: b,
      ...k,
      children: r.icon
    }
  );
}, R = z(kt), ht = z(
  ({
    id: r,
    type: a = "text",
    decorator: b,
    validation: n = u.Default,
    clearable: k = !1,
    placeholder: d,
    required: D,
    obfuscated: p,
    disabled: o = !1,
    autocomplete: M = !1,
    dotted: W = !1,
    value: h = "",
    copyable: $ = !1,
    onChange: l,
    onEnterPressed: N,
    onBlur: g,
    onClear: y,
    onFocus: E,
    size: H,
    spellcheck: V,
    readonly: v,
    focusOnMount: C,
    selectable: K = !1,
    extraActions: I,
    maxLength: U,
    ...Y
  }, _) => {
    const w = et(null);
    rt(_, () => w.current, []);
    const { isFocusVisible: q, focusProps: c } = f({
      isTextInput: !0
    }), { isFocusVisible: j, focusProps: G } = f(), { isFocusVisible: B, focusProps: J } = f(), { isFocusVisible: P, focusProps: Q } = f(), { copy: X, status: F } = ut(), [x, L] = ot(
      typeof p == "boolean" ? p : a === "password"
      /* Password */
    );
    O(() => {
      setTimeout(() => {
        var t;
        C && ((t = w.current) == null || t.focus());
      }, 0);
    }, [C]), O(() => {
      typeof p == "boolean" && L(p);
    }, [p]);
    const Z = (t) => {
      t.key === "Enter" && N && N(t);
    }, A = () => a === "password" ? x ? "password" : "text" : a, tt = typeof V == "boolean" ? { spellCheck: V } : null;
    return /* @__PURE__ */ T(
      "div",
      {
        ...Y,
        className: i([
          "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-body-small tw-font-sans tw-relative tw-bg-base dark:tw-bg-transparent",
          W ? "tw-border-dashed" : "tw-border-solid",
          o || v ? "tw-bg-box-disabled dark:tw-bg-box-disabled hover:tw-cursor-not-allowed tw-border-line-weak dark:tw-border-line-weak" : i([
            "focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong",
            pt[n],
            q && !j && !B && !P && m
          ])
        ]),
        "data-test-id": "fondue-text-input-component",
        children: [
          b && /* @__PURE__ */ e(
            "div",
            {
              className: i([
                "tw-flex tw-items-center tw-justify-center tw-pl-1",
                o ? "tw-text-black-60" : "tw-text-black-80"
              ]),
              "data-test-id": "decorator",
              children: b
            }
          ),
          /* @__PURE__ */ e(
            "input",
            {
              ...c,
              id: dt(r),
              ref: w,
              className: i([
                "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
                o || v ? "tw-text-text-disabled tw-placeholder-text-disabled dark:tw-text-black-30 dark:tw-placeholder-black-40 hover:tw-cursor-not-allowed" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
              ]),
              onClick: () => {
                var t;
                return (t = w.current) == null ? void 0 : t.focus();
              },
              onChange: (t) => l == null ? void 0 : l(t.currentTarget.value),
              onBlur: (t) => {
                var s;
                (s = c.onBlur) == null || s.call(c, t), g == null || g(t);
              },
              onKeyDown: Z,
              placeholder: d,
              value: h,
              type: A(),
              required: D,
              readOnly: v,
              disabled: o,
              onFocus: (t) => {
                var s;
                (s = c.onFocus) == null || s.call(c, t), K && t.target.select(), E && E(t);
              },
              autoComplete: M ? "on" : "off",
              maxLength: U,
              size: H,
              "data-test-id": "text-input",
              ...tt
            }
          ),
          I && I.length > 0 && I.map((t, s) => {
            const S = `text-input-extra-action-${s}`;
            return t.tooltip ? /* @__PURE__ */ e(
              ft,
              {
                ...t.tooltip,
                triggerElement: /* @__PURE__ */ e(R, { extraAction: t, disabled: o })
              },
              S
            ) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, S);
          }),
          `${h}`.length > 0 && k && /* @__PURE__ */ e(
            "button",
            {
              className: i([
                "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60  hover:tw-text-black-100",
                j && m
              ]),
              onClick: () => {
                var t, s;
                (t = w.current) == null || t.focus(), (s = w.current) == null || s.setAttribute("value", ""), l == null || l(""), y == null || y();
              },
              "data-test-id": "clear-icon",
              title: "Clear text input",
              "aria-label": "clear text input",
              disabled: o,
              type: "button",
              ...G,
              children: /* @__PURE__ */ e(nt, {})
            }
          ),
          a === "password" && /* @__PURE__ */ e(
            "button",
            {
              className: i([
                "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
                B && m
              ]),
              onClick: () => L(!x),
              "data-test-id": "visibility-icon",
              title: "Toggle text visibility",
              type: "button",
              "aria-label": `${x ? "unveil" : "obfuscate"} text input`,
              disabled: o,
              ...J,
              children: x ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(wt, {})
            }
          ),
          n === u.Loading && /* @__PURE__ */ e("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10", children: /* @__PURE__ */ e(mt, { size: bt.ExtraSmall }) }),
          (n === u.Error || n === u.Warning) && /* @__PURE__ */ e(
            "span",
            {
              className: i([
                "tw-flex tw-items-center tw-justify-center",
                n === u.Error && "tw-text-text-negative",
                n === u.Warning && "tw-text-text-warning"
              ]),
              "data-test-id": "error-state-exclamation-mark-icon",
              children: /* @__PURE__ */ e(at, {})
            }
          ),
          $ && /* @__PURE__ */ T(
            "button",
            {
              className: i([
                "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
                P && m
              ]),
              onClick: () => X(h),
              "data-test-id": "copy-icon",
              title: "Copy input text",
              disabled: o,
              type: "button",
              ...Q,
              children: [
                F === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(ct, {}) }),
                F === "idle" && /* @__PURE__ */ e(it, {}),
                F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(st, {}) })
              ]
            }
          )
        ]
      }
    );
  }
);
ht.displayName = "FondueTextInput";
export {
  ht as TextInput,
  xt as TextInputType
};
//# sourceMappingURL=TextInput.es.js.map
