import { j as t } from "../../node_modules/react/jsx-runtime.mjs";
import { useState as u, useRef as v, useMemo as D, useEffect as d } from "react";
import { useTranslation as L } from "../../node_modules/react-i18next/dist/es/useTranslation.mjs";
import M from "../../node_modules/antd/es/theme/index.mjs";
import O from "../../node_modules/antd/es/space/index.mjs";
import T from "../../node_modules/antd/es/input/index.mjs";
import V from "../../node_modules/antd/es/tag/index.mjs";
import _ from "../../node_modules/antd/es/tooltip/index.mjs";
import $ from "../../node_modules/@ant-design/icons/es/icons/PlusOutlined.mjs";
const X = ({ tagData: m = [], changeEmit: c = () => {
} }) => {
  const { t: k } = L(), { token: z } = M.useToken(), [n, r] = u(), [p, h] = u(!1), [l, I] = u(""), [x, j] = u(-1), [a, f] = u(""), C = v(null), g = v(null), s = D(() => m || [], [m]);
  d(() => s != null && s.length && (s == null ? void 0 : s.length) > 0 ? r(s) : r([]), [s]), d(() => {
    var e;
    p && ((e = C.current) == null || e.focus());
  }, [p]), d(() => {
    var e;
    (e = g.current) == null || e.focus();
  }, [a]);
  const B = (e) => {
    const o = n.filter((i) => i !== e);
    c(o), r(o);
  }, P = () => {
    h(!0);
  }, R = (e) => {
    I(e.target.value);
  }, y = () => {
    if (l && !n.includes(l)) {
      const e = [...n, l];
      c(e), r([...n, l]);
    }
    h(!1), I("");
  }, A = (e) => {
    f(e.target.value);
  }, E = () => {
    const e = [...n];
    e[x] = a, c(e), r(e), j(-1), f("");
  }, b = {
    width: 64,
    height: 22,
    marginInlineEnd: 8,
    verticalAlign: "top"
  }, w = {
    height: 22,
    background: z.colorBgContainer,
    borderStyle: "border",
    cursor: "pointer"
  };
  return t.jsxs(O, { size: [0, 8], wrap: !0, children: [(n == null ? void 0 : n.length) > 0 ? t.jsx(t.Fragment, { children: n.map((e, o) => {
    if (x === o)
      return t.jsx(T, { ref: g, size: "small", style: b, value: a, onChange: A, onBlur: E, onPressEnter: E }, o);
    const i = (e == null ? void 0 : e.length) > 20, S = t.jsx(V, { closable: !0, style: { userSelect: "none" }, onClose: () => B(e), children: t.jsx("span", { onDoubleClick: (F) => {
      o !== 0 && (j(o), f(e), F.preventDefault());
    }, children: i ? `${e.slice(0, 20)}...` : e }) }, e);
    return i ? t.jsx(_, { title: e, children: S }, e) : S;
  }) }) : t.jsx(t.Fragment, {}), p ? t.jsx(T, { ref: C, type: "text", size: "small", style: b, value: l, onChange: R, onBlur: y, onPressEnter: y }) : t.jsx(V, { style: w, icon: t.jsx($, {}), onClick: P, children: k("System_Add", "添加") })] });
};
export {
  X as default
};
