import { jsx } from 'react/jsx-runtime';
import { useCallback, useMemo } from 'react';
import MultipleSelector from '../../components/multi-select.mjs';
import { TAILWIND_CLASSES_WITH_BREAKPOINTS } from '../../utils/tailwind-classes.mjs';

const EMPTY_OPTIONS = [];
const ClassNameMultiselect = ({
  value,
  onChange
}) => {
  const searchClasses = useCallback(
    async (value2) => {
      return new Promise((resolve) => {
        const res = TAILWIND_CLASSES_WITH_BREAKPOINTS.filter(
          (option) => option.includes(value2)
        );
        resolve(
          res.map((cls) => ({
            value: cls,
            label: cls
          }))
        );
      });
    },
    []
  );
  const handleChange = useCallback(
    (values) => {
      const newClassName = values.map((v) => v.value).join(" ");
      onChange(newClassName);
    },
    [onChange]
  );
  const emptyIndicator = useMemo(
    () => /* @__PURE__ */ jsx("p", { className: "text-center text-lg leading-10 text-gray-600 dark:text-gray-400", children: "No results found." }),
    []
  );
  const loadingIndicator = useMemo(
    () => /* @__PURE__ */ jsx("p", { className: "py-2 text-center text-lg leading-10 text-muted-foreground", children: "Loading..." }),
    []
  );
  const multipleSelectorValues = useMemo(() => {
    return value?.split(" ").filter((cls) => cls.trim() !== "").map((cls) => ({
      value: cls,
      label: cls
    })) || EMPTY_OPTIONS;
  }, [value]);
  return /* @__PURE__ */ jsx(
    MultipleSelector,
    {
      defaultOptions: EMPTY_OPTIONS,
      value: multipleSelectorValues,
      onChange: handleChange,
      placeholder: "Type class name...",
      creatable: true,
      emptyIndicator,
      loadingIndicator,
      onSearch: searchClasses
    }
  );
};

export { ClassNameMultiselect as default };
