import { Component } from "@contember/binding";
import { FieldContainer, SelectCreateNewWrapper, getPortalRoot } from "@contember/ui";
import { useCallback, memo } from "react";
import Select, { components } from "react-select";
import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
import { useLabelMiddleware } from "../../environment/LabelMiddleware.js";
import { shouldCancelStart } from "../../helpers/shouldCancelStart.js";
import { useCommonReactSelectProps } from "./useCommonReactSelectProps.js";
import { jsx } from "react/jsx-runtime";
import { DynamicMultiChoiceField } from "../ChoiceField/DynamicMultiChoiceField.js";
const MultiSelectField = Component((props) => /* @__PURE__ */ jsx(DynamicMultiChoiceField, {
  ...props,
  children: (choiceProps) => /* @__PURE__ */ jsx(MultiSelectFieldInner, {
    ...props,
    ...choiceProps
  })
}), "MultiSelectField");
const typedMemo = memo;
const MultiSelectFieldInner = typedMemo(({
  currentValues,
  data,
  errors,
  onAdd,
  onClear,
  onRemove,
  reactSelectProps,
  placeholder,
  menuZIndex,
  onAddNew,
  onMove,
  onSearch,
  isLoading,
  ...fieldContainerProps
}) => {
  const labelMiddleware = useLabelMiddleware();
  const selectProps = useCommonReactSelectProps({
    reactSelectProps,
    placeholder,
    data,
    isInvalid: (errors?.length ?? 0) > 0,
    menuZIndex,
    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__ */ jsx(FieldContainer, {
    ...fieldContainerProps,
    errors,
    label: labelMiddleware(fieldContainerProps.label),
    children: /* @__PURE__ */ jsx(SelectCreateNewWrapper, {
      onClick: onAddNew,
      children: onMove ? /* @__PURE__ */ jsx(SortableSelect, {
        ...allSelectProps,
        useDragHandle: true,
        axis: "xy",
        onSortEnd,
        distance: 4,
        helperContainer: getPortalRoot,
        helperClass: "sortable-dragged",
        shouldCancelStart,
        components: {
          ...selectProps.components,
          MultiValue: SortableMultiValue,
          MultiValueLabel: SortableMultiValueLabel
        }
      }) : /* @__PURE__ */ jsx(Select, {
        menuPortalTarget: getPortalRoot(),
        ...allSelectProps
      })
    })
  });
});
const SortableSelect = SortableContainer(Select);
const SortableMultiValue = SortableElement((props) => {
  const onMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = {
    ...props.innerProps,
    onMouseDown
  };
  return /* @__PURE__ */ jsx(components.MultiValue, {
    ...props,
    innerProps
  });
});
const SortableMultiValueLabel = SortableHandle((props) => /* @__PURE__ */ jsx(components.MultiValueLabel, {
  ...props
}));
export {
  MultiSelectField,
  MultiSelectFieldInner
};
//# sourceMappingURL=MultiSelectField.js.map
