import { jsxDEV } from "react/jsx-dev-runtime";
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 { DynamicMultiChoiceField } from "../ChoiceField/DynamicMultiChoiceField.js";
const MultiSelectField = Component(
  (props) => /* @__PURE__ */ jsxDEV(DynamicMultiChoiceField, { ...props, children: (choiceProps) => /* @__PURE__ */ jsxDEV(MultiSelectFieldInner, { ...props, ...choiceProps }, void 0, false, {
    fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
    lineNumber: 29,
    columnNumber: 5
  }, globalThis) }, void 0, false, {
    fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
    lineNumber: 27,
    columnNumber: 3
  }, globalThis),
  "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: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
            lineNumber: 112,
            columnNumber: 9
          },
          globalThis
        ) : /* @__PURE__ */ jsxDEV(Select, { menuPortalTarget: getPortalRoot(), ...allSelectProps }, void 0, false, {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
          lineNumber: 127,
          columnNumber: 9
        }, globalThis) }, void 0, false, {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
          lineNumber: 110,
          columnNumber: 5
        }, globalThis)
      },
      void 0,
      false,
      {
        fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
        lineNumber: 105,
        columnNumber: 4
      },
      globalThis
    );
  }
);
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: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
      lineNumber: 148,
      columnNumber: 10
    }, globalThis);
  }
);
const SortableMultiValueLabel = SortableHandle(
  (props) => /* @__PURE__ */ jsxDEV(components.MultiValueLabel, { ...props }, void 0, false, {
    fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/MultiSelectField.tsx",
    lineNumber: 153,
    columnNumber: 58
  }, globalThis)
);
export {
  MultiSelectField,
  MultiSelectFieldInner
};
//# sourceMappingURL=MultiSelectField.js.map
