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 { jsxDEV } from "react/jsx-dev-runtime";
import { DynamicMultiChoiceField } from "../ChoiceField/DynamicMultiChoiceField.js";
var _jsxFileName = "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx";
const MultiSelectField = Component((props) => /* @__PURE__ */ jsxDEV(DynamicMultiChoiceField, {
  ...props,
  children: (choiceProps) => /* @__PURE__ */ jsxDEV(MultiSelectFieldInner, {
    ...props,
    ...choiceProps
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 26,
    columnNumber: 5
  }, void 0)
}, void 0, false, {
  fileName: _jsxFileName,
  lineNumber: 24,
  columnNumber: 3
}, void 0), "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__ */ jsxDEV(FieldContainer, {
    ...fieldContainerProps,
    errors,
    label: labelMiddleware(fieldContainerProps.label),
    children: /* @__PURE__ */ jsxDEV(SelectCreateNewWrapper, {
      onClick: onAddNew,
      children: onMove ? /* @__PURE__ */ jsxDEV(SortableSelect, {
        ...allSelectProps,
        useDragHandle: true,
        axis: "xy",
        onSortEnd,
        distance: 4,
        helperContainer: getPortalRoot,
        helperClass: "sortable-dragged",
        shouldCancelStart,
        components: {
          ...selectProps.components,
          MultiValue: SortableMultiValue,
          MultiValueLabel: SortableMultiValueLabel
        }
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 105,
        columnNumber: 9
      }, void 0) : /* @__PURE__ */ jsxDEV(Select, {
        menuPortalTarget: getPortalRoot(),
        ...allSelectProps
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 9
      }, void 0)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 5
    }, void 0)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 98,
    columnNumber: 4
  }, void 0);
});
const SortableSelect = SortableContainer(Select);
const SortableMultiValue = SortableElement((props) => {
  const onMouseDown = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  const innerProps = {
    ...props.innerProps,
    onMouseDown
  };
  return /* @__PURE__ */ jsxDEV(components.MultiValue, {
    ...props,
    innerProps
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 141,
    columnNumber: 10
  }, void 0);
});
const SortableMultiValueLabel = SortableHandle((props) => /* @__PURE__ */ jsxDEV(components.MultiValueLabel, {
  ...props
}, void 0, false, {
  fileName: _jsxFileName,
  lineNumber: 146,
  columnNumber: 58
}, void 0));
export {
  MultiSelectField,
  MultiSelectFieldInner
};
//# sourceMappingURL=MultiSelectField.js.map
