import { createElement, useCallback, memo } from "react";
import { Component } from "@contember/binding";
import { FieldContainer, SelectCreateNewWrapper } from "@contember/ui";
import Select, { components } from "react-select";
import { useLabelMiddleware } from "../../environment/LabelMiddleware.js";
import { useCommonReactSelectProps } from "./useCommonReactSelectProps.js";
import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
import { shouldCancelStart } from "../../helpers/shouldCancelStart.js";
import { DynamicMultiChoiceField } from "../ChoiceField/DynamicMultiChoiceField.js";
const MultiSelectField = Component((props) => /* @__PURE__ */ createElement(DynamicMultiChoiceField, {
  ...props
}, (choiceProps) => /* @__PURE__ */ createElement(MultiSelectFieldInner, {
  ...props,
  ...choiceProps
})), "MultiSelectField");
const typedMemo = memo;
const MultiSelectFieldInner = typedMemo(({
  currentValues,
  data,
  errors,
  onAdd,
  onClear,
  onRemove,
  reactSelectProps,
  placeholder,
  onAddNew,
  onMove,
  onSearch,
  isLoading,
  ...fieldContainerProps
}) => {
  const labelMiddleware = useLabelMiddleware();
  const selectProps = useCommonReactSelectProps({
    reactSelectProps,
    placeholder,
    data,
    isInvalid: (errors?.length ?? 0) > 0,
    onSearch
  });
  const selectOnChange = useCallback((newValue, actionMeta) => {
    if (actionMeta.action === "select-option") {
      onAdd(actionMeta.option);
    } else if (actionMeta.action === "remove-value") {
      onRemove(actionMeta.removedValue);
    } else if (actionMeta.action === "pop-value" && currentValues.length > 0) {
      onRemove(currentValues[currentValues.length - 1]);
    } else if (actionMeta.action === "clear") {
      onClear();
    }
  }, [currentValues, onAdd, onClear, onRemove]);
  const allSelectProps = {
    ...selectProps,
    isMulti: true,
    isClearable: true,
    closeMenuOnSelect: false,
    value: currentValues,
    onChange: selectOnChange,
    isLoading
  };
  const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
    onMove?.(oldIndex, newIndex);
  }, [onMove]);
  return /* @__PURE__ */ createElement(FieldContainer, {
    ...fieldContainerProps,
    errors,
    label: labelMiddleware(fieldContainerProps.label)
  }, /* @__PURE__ */ createElement(SelectCreateNewWrapper, {
    onClick: onAddNew
  }, onMove ? /* @__PURE__ */ createElement(SortableSelect, {
    ...allSelectProps,
    useDragHandle: true,
    axis: "xy",
    onSortEnd,
    distance: 4,
    helperContainer: getHelperContainer,
    helperClass: "sortable-dragged",
    shouldCancelStart,
    components: {
      ...selectProps.components,
      MultiValue: SortableMultiValue,
      MultiValueLabel: SortableMultiValueLabel
    }
  }) : /* @__PURE__ */ createElement(Select, {
    ...allSelectProps
  })));
});
const getHelperContainer = () => {
  return document.getElementById("portal-root") ?? document.body;
};
const SortableSelect = SortableContainer(Select);
const SortableMultiValue = SortableElement((props) => {
  const onMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = { ...props.innerProps, onMouseDown };
  return /* @__PURE__ */ createElement(components.MultiValue, {
    ...props,
    innerProps
  });
});
const SortableMultiValueLabel = SortableHandle((props) => /* @__PURE__ */ createElement(components.MultiValueLabel, {
  ...props
}));
export { MultiSelectField, MultiSelectFieldInner };
//# sourceMappingURL=MultiSelectField.js.map
