import { jsxs as S, jsx as e } from "react/jsx-runtime";
import { IconCross as et, IconEye as ot, IconEyeOff as rt, IconExclamationMarkTriangle as st, IconCrossCircle as it, IconClipboard as nt, IconCheckMark as ct } from "@frontify/fondue-icons";
import { useFocusRing as f } from "@react-aria/focus";
import { forwardRef as z, useRef as lt, useImperativeHandle as at, useState as wt, useEffect as O } from "react";
import { LoadingCircle as ut, LoadingCircleSize as dt } from "../LoadingCircle/LoadingCircle.es.js";
import { useCopy as pt } from "../../hooks/useCopy.es.js";
import { useMemoizedId as ft } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as b } from "../../utilities/focusStyle.es.js";
import { merge as s } from "../../utilities/merge.es.js";
import { Validation as u, validationClassMap as bt } from "../../utilities/validation.es.js";
import { LegacyTooltip as xt } from "../LegacyTooltip/LegacyTooltip.es.js";
const mt = ({ extraAction: n, disabled: a }, x) => {
  const { isFocusVisible: i, focusProps: k } = f();
  if (!n)
    return null;
  const d = 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",
        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",
        i && b
      ]),
      onClick: n.onClick,
      "data-test-id": "fondue-extra-action-icon",
      "aria-label": n.title.toLowerCase(),
      disabled: d,
      "aria-disabled": d,
      type: "button",
      ref: x,
      ...k,
      children: n.icon
    }
  );
}, R = z(mt), kt = z(
  ({
    id: n,
    type: a = "text",
    decorator: x,
    validation: i = 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: 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 = lt(null);
    at(_, () => 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 } = pt(), [m, L] = wt(
      typeof p == "boolean" ? p : a === "password"
      /* Password */
    );
    O(() => {
      const t = setTimeout(() => {
        V && c.current && c.current.focus();
      }, 0);
      return () => {
        clearTimeout(t);
      };
    }, [V]), O(() => {
      typeof p == "boolean" && L(p);
    }, [p]);
    const Z = (t) => {
      t.key === "Enter" && E && E(t);
    }, A = () => a === "password" ? m ? "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",
            bt[i],
            q && !C && !j && !B && b
          ])
        ]),
        "data-test-id": "fondue-text-input-component",
        children: [
          x ? /* @__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: x
            }
          ) : 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: d,
              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(
              xt,
              {
                ...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 && b
              ]),
              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(et, {})
            }
          ),
          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 && b
              ]),
              onClick: () => L(!m),
              "data-test-id": "visibility-icon",
              title: "Toggle text visibility",
              type: "button",
              "aria-label": `${m ? "unveil" : "obfuscate"} text input`,
              disabled: o,
              ...J,
              children: m ? /* @__PURE__ */ e(ot, {}) : /* @__PURE__ */ e(rt, {})
            }
          ),
          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(ut, { size: dt.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(st, {})
            }
          ),
          $ && /* @__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 && b
              ]),
              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(it, {}) }),
                F === "idle" && /* @__PURE__ */ e(nt, {}),
                F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(ct, {}) })
              ]
            }
          )
        ]
      }
    );
  }
);
kt.displayName = "FondueTextInput";
export {
  kt as TextInput
};
//# sourceMappingURL=TextInput.es.js.map
