'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const form = require('../../../form.cjs');
const multiSelect = require('../components/multi-select.cjs');
const icon = require('../../components/icon.cjs');

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

module.exports = IconNameField;
