'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const multiSelect = require('../../components/multi-select.cjs');
const tailwindClasses = require('../../utils/tailwind-classes.cjs');

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

module.exports = ClassNameMultiselect;
