import { j as h } from "../../../../../_virtual/jsx-runtime.js";
import { tx as o, css as C } from "../../../../style-system/dist/twind.js";
import { isEqual as I } from "lodash-es";
import { useState as g, useEffect as D } from "react";
import j from "../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@18.3.3_react-dom@18.3.0-canary-3d9b20132-20240124_reac_11750499356771f030ba7ab2c97fa340/node_modules/react-select/dist/react-select.esm.js";
import A from "../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@18.3.3_react-dom@18.3.0-canary-3d9b20132-20240124_reac_11750499356771f030ba7ab2c97fa340/node_modules/react-select/creatable/dist/react-select-creatable.esm.js";
function b(r) {
  return {
    control: (n) => n.isFocused ? o(
      "rounded py-[3px] outline outline-upstart-500 bg-white overflow-visible !min-h-full border border-gray-300 max-w-full"
    ) : o(
      "rounded py-[3px] outline outline-transparent bg-white overflow-visible !min-h-full border border-gray-300 max-w-full"
    ),
    valueContainer: () => o("bg-white px-[3px] flex gap-1"),
    singleValue: () => o("text-[95%] px-2"),
    multiValueLabel: () => o("bg-upstart-50 px-2 flex py-0.5 rounded-l text-[95%]"),
    multiValueRemove: () => o(
      "bg-upstart-100 font-normal text-upstart-400 px-0.5 py-px hover:(bg-red-200 text-gray-700) rounded-r"
    ),
    placeholder: () => o("text-sm text-gray-400 bg-white py-[2px] px-1 cursor-text"),
    input: () => o(
      "py-[2px] px-1 text-sm outline-none !focus:outline-none !focus-within:outline-none cursor-text [&>input]:focus:ring-0 [&>input]:focus-within:ring-0"
    ),
    container: () => o("text-sm min-h-8", r),
    menu: () => o("text-sm bg-white shadow-2xl rounded py-1"),
    menuList: () => C({
      scrollbarColor: "var(--violet-4) var(--violet-2)",
      scrollBehavior: "smooth",
      scrollbarWidth: "thin",
      "&:hover": {
        scrollbarColor: "var(--violet-7) var(--violet-3)"
      }
    }),
    loadingMessage(n) {
      return o("text-sm py-2");
    },
    indicatorsContainer: () => o("text-sm pr-1.5 font-normal scale-75"),
    clearIndicator: () => o("text-sm text-gray-500 hover:text-gray-700 cursor-pointer"),
    option: (n) => n.isSelected ? o("bg-upstart-100 px-2 py-1.5") : o("bg-white px-2 py-1.5 hover:(bg-upstart-600 text-white)")
  };
}
function O({
  initialValue: r,
  onChange: u,
  className: n,
  placeholder: x,
  isSearchable: y = !0,
  isClearable: m = !1
}) {
  const [l, d] = g(""), i = (e) => ({
    label: e,
    value: e
  }), [s, p] = g(
    Array.isArray(r) ? r.map(i) : typeof r == "string" ? [i(r)] : []
  );
  D(() => {
    I(
      s.map((e) => e.value),
      r
    ) || u(Array.isArray(s) ? s.map((e) => e.value) : []);
  }, [s]);
  const f = (e) => {
    if (l)
      switch (e.key) {
        case "Enter":
        case "Tab":
          console.log("Adding tag:", l), p((a) => a.find((v) => v.value === l) ? a : [...a, i(l)]), d("");
      }
  };
  return /* @__PURE__ */ h.jsx(
    A,
    {
      unstyled: !0,
      isMulti: !0,
      isClearable: m,
      inputValue: l,
      components: {
        DropdownIndicator: null
      },
      value: s,
      onChange: (e) => {
        p(e), u(Array.isArray(e) ? e.map((a) => a.value) : []);
      },
      onInputChange: (e) => d(e),
      onKeyDown: f,
      classNames: b(n),
      menuIsOpen: !1,
      isSearchable: y,
      placeholder: x
    }
  );
}
function $({
  initialValue: r,
  onChange: u,
  options: n,
  className: x,
  placeholder: y,
  isSearchable: m = !0,
  isMulti: l = !0,
  creatable: d = !1,
  clearable: i = !1
}) {
  const s = (t) => ({
    label: t,
    value: t
  }), [p, f] = g(""), [e, a] = g(
    Array.isArray(r) ? r.map(s) : typeof r == "string" ? r : []
  ), v = (t) => {
    if (t.stopPropagation(), !!p)
      switch (t.key) {
        case "Enter":
        case "Tab":
          t.preventDefault(), a((c) => Array.isArray(c) ? [...c, s(p)] : s(p)), f("");
      }
  }, w = m ? void 0 : {
    DropdownIndicator: null
  };
  return d ? /* @__PURE__ */ h.jsx(
    A,
    {
      unstyled: !0,
      formatCreateLabel: (t) => `Set to "${t}"`,
      isMulti: l,
      isClearable: i,
      inputValue: p,
      components: w,
      options: n,
      defaultValue: Array.isArray(r) ? r.map(s) : s(r),
      onChange: (t) => {
        a(t), Array.isArray(t) ? u(t.map((c) => c.value)) : u(t.value ?? null);
      },
      onInputChange: (t) => f(t),
      onKeyDown: v,
      classNames: b(x),
      isSearchable: m,
      placeholder: y
    }
  ) : /* @__PURE__ */ h.jsx(
    j,
    {
      unstyled: !0,
      isMulti: l,
      isClearable: i,
      inputValue: p,
      options: n,
      value: e,
      onChange: (t) => {
        a(t), Array.isArray(t) ? u(t.map((c) => c.value)) : u(t.value ?? null);
      },
      onInputChange: (t) => f(t),
      classNames: b(x),
      isSearchable: m,
      placeholder: y
    }
  );
}
export {
  $ as TagsSelect,
  O as default
};
//# sourceMappingURL=TagsInput.js.map
