import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { isEqual } from "lodash-es";
import { useState, useEffect } from "react";
import StateManagedSelect$1 from "../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@19.1.13_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/react-select.esm.js";
import CreatableSelect$1 from "../../../../../node_modules/.pnpm/react-select@5.10.1_@types_react@19.1.13_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/creatable/dist/react-select-creatable.esm.js";
function getClassNames(className) {
  const classNames = {
    control: (state) => !state.isFocused ? D(
      "rounded py-[3px] outline outline-transparent bg-white overflow-visible !min-h-full border border-gray-300 max-w-full"
    ) : D(
      "rounded py-[3px] outline outline-upstart-500 bg-white overflow-visible !min-h-full border border-gray-300 max-w-full"
    ),
    valueContainer: () => D("bg-white px-[3px] flex gap-1"),
    singleValue: () => D("text-[95%] px-2"),
    multiValueLabel: () => D("bg-upstart-50 px-2 flex py-0.5 rounded-l text-[95%]"),
    multiValueRemove: () => D(
      "bg-upstart-100 font-normal text-upstart-400 px-0.5 py-px hover:(bg-red-200 text-gray-700) rounded-r"
    ),
    placeholder: () => D("text-sm text-gray-400 bg-white py-[2px] px-1 cursor-text"),
    input: () => D(
      "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: () => D("text-sm min-h-8", className),
    menu: () => D("text-sm bg-white shadow-2xl rounded py-1"),
    menuList: () => E({
      scrollbarColor: "var(--violet-4) var(--violet-2)",
      scrollBehavior: "smooth",
      scrollbarWidth: "thin",
      "&:hover": {
        scrollbarColor: "var(--violet-7) var(--violet-3)"
      }
    }),
    loadingMessage(props) {
      return D("text-sm py-2");
    },
    indicatorsContainer: () => D("text-sm pr-1.5 font-normal scale-75"),
    clearIndicator: () => D("text-sm text-gray-500 hover:text-gray-700 cursor-pointer"),
    option: (state) => state.isSelected ? D("bg-upstart-100 px-2 py-1.5") : D("bg-white px-2 py-1.5 hover:(bg-upstart-600 text-white)")
  };
  return classNames;
}
function TagsInput({
  initialValue,
  onChange,
  className,
  placeholder,
  isSearchable = true,
  isClearable = false
}) {
  const [inputValue, setInputValue] = useState("");
  const createOption = (label) => ({
    label,
    value: label
  });
  const [value, setValue] = useState(
    Array.isArray(initialValue) ? initialValue.map(createOption) : typeof initialValue === "string" ? [createOption(initialValue)] : []
  );
  useEffect(() => {
    if (isEqual(
      value.map((v) => v.value),
      initialValue
    ))
      return;
    onChange(Array.isArray(value) ? value.map((v) => v.value) : []);
  }, [value]);
  const handleKeyDown = (event) => {
    if (!inputValue) return;
    switch (event.key) {
      case "Enter":
      case "Tab":
        console.log("Adding tag:", inputValue);
        setValue((prev) => {
          if (prev.find((v) => v.value === inputValue)) return prev;
          return [...prev, createOption(inputValue)];
        });
        setInputValue("");
    }
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    CreatableSelect$1,
    {
      unstyled: true,
      isMulti: true,
      isClearable,
      inputValue,
      components: {
        DropdownIndicator: null
      },
      value,
      onChange: (newValue) => {
        setValue(newValue);
        onChange(Array.isArray(newValue) ? newValue.map((v) => v.value) : []);
      },
      onInputChange: (newValue) => setInputValue(newValue),
      onKeyDown: handleKeyDown,
      classNames: getClassNames(className),
      menuIsOpen: false,
      isSearchable,
      placeholder
    }
  );
}
function TagsSelect({
  initialValue,
  onChange,
  options,
  className,
  placeholder,
  isSearchable = true,
  isMulti = true,
  creatable = false,
  clearable = false
}) {
  const createOption = (label) => ({
    label,
    value: label
  });
  const [inputValue, setInputValue] = useState("");
  const [value, setValue] = useState(
    Array.isArray(initialValue) ? initialValue.map(createOption) : typeof initialValue === "string" ? initialValue : []
  );
  const handleKeyDown = (event) => {
    event.stopPropagation();
    if (!inputValue) return;
    switch (event.key) {
      case "Enter":
      case "Tab":
        event.preventDefault();
        setValue((prev) => {
          if (Array.isArray(prev)) {
            return [...prev, createOption(inputValue)];
          } else {
            return createOption(inputValue);
          }
        });
        setInputValue("");
    }
  };
  const components = isSearchable ? void 0 : {
    DropdownIndicator: null
  };
  return creatable ? /* @__PURE__ */ jsxRuntimeExports.jsx(
    CreatableSelect$1,
    {
      unstyled: true,
      formatCreateLabel: (inputValue2) => `Set to "${inputValue2}"`,
      isMulti,
      isClearable: clearable,
      inputValue,
      components,
      options,
      defaultValue: Array.isArray(initialValue) ? initialValue.map(createOption) : createOption(initialValue),
      onChange: (newValue) => {
        setValue(newValue);
        if (Array.isArray(newValue)) {
          onChange(newValue.map((v) => v.value));
        } else {
          onChange(newValue.value ?? null);
        }
      },
      onInputChange: (newValue) => setInputValue(newValue),
      onKeyDown: handleKeyDown,
      classNames: getClassNames(className),
      isSearchable,
      placeholder
    }
  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
    StateManagedSelect$1,
    {
      unstyled: true,
      isMulti,
      isClearable: clearable,
      inputValue,
      options,
      value,
      onChange: (newValue) => {
        setValue(newValue);
        if (Array.isArray(newValue)) {
          onChange(newValue.map((v) => v.value));
        } else {
          onChange(newValue.value ?? null);
        }
      },
      onInputChange: (newValue) => setInputValue(newValue),
      classNames: getClassNames(className),
      isSearchable,
      placeholder
    }
  );
}
export {
  TagsSelect,
  TagsInput as default
};
//# sourceMappingURL=TagsInput.js.map
