import { jsx, jsxs } from 'react/jsx-runtime';
import { useCallback, useMemo } from 'react';
import { FormItem, FormLabel, FormControl, FormDescription } from '../../../form.mjs';
import MultipleSelector from '../components/multi-select.mjs';
import { iconNames } from '../../components/icon.mjs';

const EMPTY_OPTIONS = [];
const IconNameField = ({
  value,
  onChange,
  description,
  label,
  isRequired
}) => {
  const searchNames = useCallback(async (value2) => {
    return new Promise((resolve) => {
      const res = iconNames.filter(
        (option) => option.toLowerCase().includes(value2.toLowerCase())
      );
      resolve(
        res.map((name) => ({
          value: name,
          label: name
        }))
      );
    });
  }, []);
  const handleChange = useCallback(
    (values) => {
      const firstValue = values[0];
      if (firstValue) {
        onChange(firstValue.value);
      }
    },
    [onChange]
  );
  const multipleSelectorValues = useMemo(() => {
    return [{ value, label: value }];
  }, [value]);
  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..." }), []);
  return /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
    /* @__PURE__ */ jsxs(FormLabel, { children: [
      label,
      isRequired && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
    ] }),
    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
      MultipleSelector,
      {
        value: multipleSelectorValues,
        maxSelected: 1,
        defaultOptions: EMPTY_OPTIONS,
        onChange: handleChange,
        placeholder: "Type icon name...",
        emptyIndicator,
        loadingIndicator,
        onSearch: searchNames
      }
    ) }),
    description && /* @__PURE__ */ jsx(FormDescription, { children: description })
  ] });
};

export { IconNameField as default };
