import { jsx } from "react/jsx-runtime";
import { useId } from "react";
import { S as StateManagedSelect$1 } from "../../react-select.esm-Bu36HujU.js";
import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValueRemove, b as getMultiValue } from "../../multi-select-components-CT_W0Cy9.js";
import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultMultiValueRemove } from "./custom-select-default-components.js";
import { getValue } from "./shared.js";
import { BaseControl } from "../base-control/base-control.js";
import { eightshiftSelectClasses } from "./styles.js";
import { c as components } from "../../index-641ee5b8.esm-DVp0njHa.js";
/**
 * Multi-select menu with re-orderable items.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.label] - Label of the component.
 * @param {string} [props.help] - Help text of the component.
 * @param {string} [props.icon] - Icon of the component.
 * @param {string} [props.subtitle] - Subtitle of the component.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
 * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
 * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
 * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
 * @param {Function} props.onChange - Function to call when the value changes.
 * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
 * @param {boolean} [props.clearable] - Whether the select is clearable.
 * @param {boolean} [props.noSearch] - Whether the search is disabled.
 * @param {boolean} [props.disabled] - Whether the select is disabled.
 * @param {boolean} [props.keepMenuOpenAfterSelect] - Whether the menu stays open after an select.
 * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
 * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
 * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
 * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
 * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
 * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
 * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
 * @param {string} [props.className] - Classes to pass to the select menu.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The MultiSelect component.
 *
 * @example
 * const [value, setValue] = useState([]);
 *
 * const options = [
 * 	{ label: 'Option 1', value: 'option-1' },
 * 	{ label: 'Option 2', value: 'option-2' },
 * 	{ label: 'Option 3', value: 'option-3' },
 * ];
 *
 * <MultiSelect
 * 	label='Select items'
 * 	options={loadOptions}
 * 	value={value}
 * 	onChange={setValue}
 * />
 *
 * @preserve
 */
const MultiSelect = (props) => {
  const {
    label,
    help,
    icon,
    subtitle,
    actions,
    inline,
    value: rawValue,
    onChange,
    options,
    simpleValue = false,
    disabled = false,
    noSearch = false,
    clearable = false,
    keepMenuOpenAfterSelect = false,
    placeholder,
    customClearIndicator,
    customDropdownArrow,
    customMenuOption,
    customValueDisplay,
    customValueRemove,
    customValueContainer,
    className,
    hidden,
    ...additionalProps
  } = props;
  const idBase = useId();
  const value = getValue(simpleValue, rawValue, options).map((item, index) => ({
    ...item,
    id: (simpleValue ? item : item?.value) ?? `${idBase}-${index}`
  }));
  const modifiedOnChange = (v) => {
    if (simpleValue) {
      onChange(v?.map(({ value: value2 }) => value2));
      return;
    }
    onChange(v?.map((item) => ({ ...item, id: void 0 })));
  };
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    BaseControl,
    {
      label,
      icon,
      subtitle,
      actions,
      help,
      inline,
      children: /* @__PURE__ */ jsx(
        DndContext,
        {
          modifiers: [restrictToParentElement],
          onDragEnd: getDragEndHandler(modifiedOnChange, value),
          children: /* @__PURE__ */ jsx(SortableContext, { items: value.map(({ id }) => id), children: /* @__PURE__ */ jsx(
            StateManagedSelect$1,
            {
              isMulti: true,
              unstyled: true,
              options: options.map((item) => ({ id: item.value, ...item })),
              value,
              onChange: modifiedOnChange,
              closeMenuOnSelect: !keepMenuOpenAfterSelect,
              isClearable: clearable,
              isSearchable: !noSearch,
              isDisabled: disabled,
              className,
              placeholder,
              classNames: eightshiftSelectClasses,
              components: {
                MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
                MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
                MultiValueRemove: getMultiValueRemove(customValueRemove ?? CustomSelectDefaultMultiValueRemove),
                Option: customMenuOption ?? components.Option,
                IndicatorSeparator: null,
                DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
              },
              menuPlacement: "auto",
              menuPortalTarget: document.body,
              ...additionalProps
            }
          ) })
        }
      )
    }
  );
};
export {
  MultiSelect
};
