import { jsxs as h, jsx as c } from "react/jsx-runtime";
import { X as _ } from "lucide-react";
import { useId as C, useState as D, useRef as P, Fragment as L } from "react";
import { Badge as X } from "../atoms/badge.js";
import { cn as $ } from "../../../lib/utils.js";
const T = /[,\n\r]+/;
function q({ value: n, onRemove: s }) {
  return /* @__PURE__ */ h(X, { className: "gap-1 pr-1", variant: "secondary", children: [
    /* @__PURE__ */ c("span", { className: "max-w-[220px] truncate", children: n }),
    /* @__PURE__ */ c(
      "button",
      {
        "aria-label": `Remove ${n}`,
        className: "ml-0.5 rounded text-muted-foreground hover:text-foreground",
        onClick: (p) => {
          p.stopPropagation(), s();
        },
        type: "button",
        children: /* @__PURE__ */ c(_, { className: "size-3" })
      }
    )
  ] });
}
function G(n, s) {
  return /* @__PURE__ */ c(q, { onRemove: s, value: n });
}
function W({
  values: n,
  onChange: s,
  placeholder: p,
  addOnBlur: z = !0,
  validateValue: f,
  isDuplicate: x,
  renderValue: B,
  className: V,
  disabled: y = !1,
  id: A,
  ...F
}) {
  const S = C(), b = A ?? S, [i, m] = D(""), [w, d] = D(null), k = P(null), l = P(n);
  l.current = n;
  const j = B ?? G, I = (e, t) => {
    for (const o of t) {
      const r = x ? x(e, o) : e === o;
      if (r === !0)
        return "Already added";
      if (typeof r == "string" && r)
        return r;
    }
    return null;
  }, N = (e) => {
    const t = e.trim();
    if (!t)
      return;
    const o = l.current, r = f ? f(t, o) : {};
    if (r.error) {
      d(r.error);
      return;
    }
    const u = r.normalizedValue ?? t, a = I(u, o);
    if (a) {
      d(a);
      return;
    }
    s([...o, u]), m(""), d(null);
  }, v = (e) => {
    s(l.current.filter((t) => t !== e));
  }, K = (e) => {
    if ((e.key === "Enter" || e.key === ",") && !e.nativeEvent.isComposing)
      e.preventDefault(), N(i);
    else if (e.key === "Backspace" && i === "") {
      const t = l.current.at(-1);
      t !== void 0 && v(t);
    } else
      d(null);
  }, M = (e) => {
    const t = e.clipboardData.getData("text");
    if (!T.test(t))
      return;
    e.preventDefault();
    const o = t.split(T).map((a) => a.trim()).filter(Boolean);
    let r = [...l.current], u = null;
    for (const a of o) {
      const g = f ? f(a, r) : {};
      if (g.error) {
        u = g.error;
        break;
      }
      const E = g.normalizedValue ?? a, R = I(E, r);
      if (R) {
        u = R;
        break;
      }
      r = [...r, E];
    }
    r.length > l.current.length && s(r), m(""), d(u);
  };
  return /* @__PURE__ */ h("div", { className: "space-y-1", children: [
    /* @__PURE__ */ h(
      "label",
      {
        className: $(
          "flex min-h-10 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
          y && "cursor-not-allowed opacity-50",
          V
        ),
        htmlFor: b,
        ref: k,
        children: [
          n.map((e) => /* @__PURE__ */ c(L, { children: j(e, () => v(e)) }, e)),
          /* @__PURE__ */ c(
            "input",
            {
              ...F,
              className: "min-w-32 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
              disabled: y,
              id: b,
              onBlur: (e) => {
                const t = k.current?.contains(e.relatedTarget);
                z && i.trim() && !t && N(i);
              },
              onChange: (e) => m(e.target.value),
              onKeyDown: K,
              onPaste: M,
              placeholder: n.length === 0 ? p : "",
              type: "text",
              value: i
            }
          )
        ]
      }
    ),
    w && /* @__PURE__ */ c("p", { className: "text-destructive text-sm", children: w })
  ] });
}
export {
  W as TagsInput,
  q as TagsInputValue
};
