"use strict";
var import_Tags = require("../Tags.css");
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const jsxRuntime = require("react/jsx-runtime");
const antd = require("antd");
const React = require("react");
const kit_Icon = require("./Icon.cjs");
const kit_Input = require("./Input.cjs");
const kit_internal_functions = require("./internal/functions.cjs");
const kit_Link = require("./Link.cjs");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
const kit_Tooltip = require("./Tooltip.cjs");
const base = "Tags_base_a6e1b";
const showMore = "Tags_showMore_a6e1b";
const tagPlus = "Tags_tagPlus_a6e1b";
const tagEdit = "Tags_tagEdit_a6e1b";
const ghost = "Tags_ghost_a6e1b";
const tagInput = "Tags_tagInput_a6e1b";
const css = {
  base,
  showMore,
  tagPlus,
  tagEdit,
  ghost,
  tagInput
};
const TagAction = {
  Add: "Add",
  Remove: "Remove",
  Update: "Update"
};
const ARIA_LABEL_CONTAINER = "new-tag-container";
const ARIA_LABEL_TRIGGER = "new-tag-trigger";
const ARIA_LABEL_INPUT = "new-tag-input";
const TAG_MAX_LENGTH = 50;
const COMPACT_MAX_THRESHOLD = 6;
const Tags = ({ compact, disabled = false, ghost: ghost2, tags, onAction }) => {
  const initialState = {
    editInputIndex: -1,
    inputVisible: false,
    inputWidth: 82
  };
  const [state, setState] = React.useState(initialState);
  const [showMore2, setShowMore] = React.useState(false);
  const inputRef = React.useRef(null);
  const editInputRef = React.useRef(null);
  const {
    themeSettings: { className }
  } = kit_Theme_UI.useTheme();
  const handleClose = React.useCallback(
    (removedTag) => {
      if (disabled)
        return;
      onAction == null ? void 0 : onAction(TagAction.Remove, removedTag);
    },
    [onAction, disabled]
  );
  const handleEdit = React.useCallback(
    (htmlId, index) => {
      if (disabled)
        return;
      const element = document.getElementById(htmlId);
      const rect = element == null ? void 0 : element.getBoundingClientRect();
      setState((state2) => ({
        ...state2,
        editInputIndex: index,
        inputWidth: (rect == null ? void 0 : rect.width) ?? state2.inputWidth
      }));
    },
    [disabled]
  );
  const handleTagPlus = React.useCallback(() => {
    setState((state2) => ({ ...state2, inputVisible: true }));
  }, []);
  React.useEffect(() => {
    var _a;
    if (state.inputVisible)
      (_a = inputRef.current) == null ? void 0 : _a.focus();
  }, [state.inputVisible]);
  React.useEffect(() => {
    var _a, _b;
    if (state.editInputIndex === -1)
      return;
    (_a = editInputRef.current) == null ? void 0 : _a.focus();
    (_b = editInputRef.current) == null ? void 0 : _b.select();
  }, [state.editInputIndex]);
  const stopPropagation = React.useCallback((e) => e.stopPropagation(), []);
  const handleInputConfirm = (e, previousValue, tagID) => {
    const newTag = e.target.value.trim();
    const oldTag = previousValue == null ? void 0 : previousValue.trim();
    if (newTag && newTag !== oldTag) {
      if (oldTag) {
        onAction == null ? void 0 : onAction(TagAction.Update, newTag, tagID);
      } else {
        onAction == null ? void 0 : onAction(TagAction.Add, newTag);
      }
    }
    setState((state2) => ({ ...state2, editInputIndex: -1, inputVisible: false }));
  };
  const { editInputIndex, inputVisible, inputWidth } = state;
  const classes = [className, css.base];
  if (ghost2)
    classes.push(css.ghost);
  const addTagControls = inputVisible ? /* @__PURE__ */ jsxRuntime.jsx(
    kit_Input,
    {
      "aria-label": ARIA_LABEL_INPUT,
      className: css.tagInput,
      defaultValue: "",
      ref: inputRef,
      size: "small",
      type: "text",
      width: inputWidth,
      onBlur: handleInputConfirm,
      onPressEnter: handleInputConfirm
    }
  ) : !disabled && /* @__PURE__ */ jsxRuntime.jsxs(
    antd.Tag,
    {
      "aria-label": ARIA_LABEL_TRIGGER,
      className: css.tagPlus,
      tabIndex: 0,
      onClick: handleTagPlus,
      onKeyDown: (e) => {
        if (e.key === "Enter")
          handleTagPlus();
      },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { decorative: true, name: "add", size: "tiny" }),
        " Add Tag"
      ]
    }
  );
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": ARIA_LABEL_CONTAINER, className: classes.join(" "), onClick: stopPropagation, children: [
    compact && addTagControls,
    tags.sort((a, b) => kit_internal_functions.alphaNumericSorter(a, b)).map((tag, index) => {
      if (compact && !showMore2 && index >= COMPACT_MAX_THRESHOLD) {
        if (index > COMPACT_MAX_THRESHOLD)
          return null;
        return /* @__PURE__ */ jsxRuntime.jsx(kit_Link, { onClick: () => setShowMore(true), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: css.showMore, children: [
          "+",
          tags.length - COMPACT_MAX_THRESHOLD,
          " more"
        ] }) }, "more");
      }
      if (editInputIndex === index) {
        return /* @__PURE__ */ jsxRuntime.jsx(
          kit_Input,
          {
            "aria-label": ARIA_LABEL_INPUT,
            className: css.tagInput,
            defaultValue: tag,
            ref: editInputRef,
            size: "small",
            width: inputWidth,
            onBlur: (e) => handleInputConfirm(e, tag, index),
            onPressEnter: (e) => handleInputConfirm(e, tag, index)
          },
          tag
        );
      }
      const htmlId = kit_internal_functions.toHtmlId(tag);
      const isLongTag = tag.length > TAG_MAX_LENGTH;
      const tagElement = /* @__PURE__ */ jsxRuntime.jsx(
        antd.Tag,
        {
          closable: !disabled,
          id: htmlId,
          tabIndex: 0,
          onClose: () => handleClose(tag),
          onKeyDown: (e) => {
            if (e.key === "Enter")
              handleEdit(htmlId, index);
            if (e.key === "Backspace")
              handleClose(tag);
          },
          children: /* @__PURE__ */ jsxRuntime.jsx(
            "span",
            {
              onClick: (e) => {
                e.preventDefault();
                handleEdit(htmlId, index);
              },
              children: isLongTag && !disabled ? kit_internal_functions.truncate(tag, TAG_MAX_LENGTH) : tag
            }
          )
        },
        tag
      );
      return isLongTag && !compact ? /* @__PURE__ */ jsxRuntime.jsx(kit_Tooltip, { content: tag, children: tagElement }, tag) : tagElement;
    }),
    !compact && addTagControls
  ] });
};
const tagsActionHelper = (tags, callbackFn) => {
  return (action, tag, updatedId) => {
    let newTags = [...tags];
    if (action === TagAction.Add) {
      newTags.push(tag);
    } else if (action === TagAction.Remove) {
      newTags = tags.filter((t) => t !== tag);
    } else if (action === TagAction.Update && updatedId !== void 0) {
      newTags[updatedId] = tag;
    }
    callbackFn(newTags);
  };
};
exports.ARIA_LABEL_CONTAINER = ARIA_LABEL_CONTAINER;
exports.ARIA_LABEL_INPUT = ARIA_LABEL_INPUT;
exports.ARIA_LABEL_TRIGGER = ARIA_LABEL_TRIGGER;
exports.TagAction = TagAction;
exports.default = Tags;
exports.tagsActionHelper = tagsActionHelper;
