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